用JS写的百叶窗3 | 易学教程

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0;padding:0;list-style:none;}
body{background:url(img/bg.gif) repeat top left;}
#box{width:600px;height:400px;margin:50px auto; border:20px solid #fff; overflow:hidden; position:relative;}
#box ul li{ opacity:0; width:600px; height:400px; position:absolute; top:0; left:0;}
#box ul li span{ width:150px; height:400px; float:left;}
#box ul .active{ opacity:1;}
#box ol{width:100%; height:34px; position:absolute; bottom:20px;}
#box ol li{ float:left; width:42px; height:42px; background:rgba(255,255,255,0.4); border-radius:50%;font-weight:bolder; margin:0 53px; cursor:pointer; position:relative;}
#box ol li span{ line-height:34px; text-align:center; background:#8bc2d4; position:absolute; top:4px; left:4px; width:34px; height:34px; border-radius:50%; color:#fff; font-size:20px;}
#box ol .active{ background:rgba(124,180,199,0.4);}
#box ol .active span{ color:#8bc2d4; background:#fff;}
</style>
<script src="move.js"></script>
<script>
window.onload=function(){
var oBox=document.getElementById('box');
var oUl1=oBox.getElementsByTagName('ul')[0];
var aLi1=oUl1.getElementsByTagName('li');
var oOl1=oBox.getElementsByTagName('ol')[0];
var aLi2=oOl1.getElementsByTagName('li');

for(var i=0;i<aLi1.length;i++){
var aPos=[]
var aSpan=aLi1[i].getElementsByTagName('span');
for(var j=0;j<aSpan.length;j++){
aPos[j]={left:aSpan[j].offsetLeft,top:aSpan[j].offsetTop};
aSpan[j].style.left=aPos[j].left+'px';
if(j%2==0){
aSpan[j].style.top=0;
}else{
aSpan[j].style.bottom=0;
}

}
for(var j=0;j<aSpan.length;j++){
aSpan[j].style.position='absolute';
aSpan[j].style.background='url(img/'+(i+1)+'.jpg)';
aSpan[j].style.backgroundPosition='-'+j*150+'px 0';
aSpan[j].style.margin=0;
aSpan[j].style.height=0;
}
}
for(var i=0;i<aLi2.length;i++){
(function(index){
aLi2[i].onclick=function(){
tab(index);
};
})(i);
}
function tab(index){
for(var i=0;i<aLi2.length;i++){
aLi2[i].className='';
aLi1[i].style.opacity=0;
var aSpan=aLi1[i].getElementsByTagName('span');
for(var j=0;j<aSpan.length;j++){
aSpan[j].style.height=0;
}
}
aLi2[index].className='active';
aLi1[index].style.opacity=1;
var aSpan=aLi1[index].getElementsByTagName('span');
for(var j=0;j<aSpan.length;j++){
move(aSpan[j],{height:400});
}
}

};
</script>
</head>-

来源：https://www.cnblogs.com/lovetuantuan/p/4579308.html

标签

box

background

position