百叶窗

 <style type="text/css">   

#box{    height:400px;    width:800px;    border:1px solid #000;    position:relative;    overflow:hidden;   }   

#box span {    width:800px;    height:40px;    box-shadow:0 0 1px #ccc;    background:url(images/img1.jpg);    position:absolute;       }  

</style>

 <script type="text/javascript">

　　   function main(){    

　　　　//创建10个span    setspan();   

　　　　 function setspan(){     var _span=document.createElement("span");     

　　　　　　var _box=document.getElementById("box");     

　　　　for(var i=0;i<10;i++)      {       _box.appendChild(document.createElement("span"));      }     

　　　　 cssStyle();      setmove();    }   

　　　　 //css样式；   

　　　　

　　　　 function cssStyle(){    

　　　　　　 var _span=document.getElementsByTagName("span");    

　　　　　　　 for(var i=0;i<_span.length;i++){     

　　　　　　　　　　 _span[i].style.top=i*40+"px";   

　　　　　　　　　　  _span[i].style.backgroundPosition="0px "+-i*40+"px";    

　　　　　　　　　　  _span[i].style.height=0+"px";     }    }

   //设置动画效果；  

　　　　  function setmove(){    

　　　　 　　var _span=document.getElementsByTagName("span");   

　　　　　　  var _flag=0;    

　　　　　　 var _setimer=0;    

　　　　　　 function timer(){     

　　　　　　　　 window.clearTimeout(timer);      

　　　　　　　　for(var i=0;i<_span.length;i++){     

　　　　　　　　  //alert("ok")       

　　　　　　　　　　if(_span[i].offsetHeight<40){        flag=1;        _span[i].style.height=_span[i].offsetHeight+5+"px";       }

　　　　　　　　　　else{        window.clearTimeout(timer);        _span[i].style.height=0+"px";        _setimer=setTimeout(timer,100);       }    

　　　　　　　　　　  }      

　　　　　　　　if(flag){      

　　　　　　　　　　 _setimer=setTimeout(timer,100);    

　　　　　　　　　　  }   

　　　　　　　　  }  

　　　　　　　　   _setimer=setTimeout(timer,100);   

　　　　　　　　 }  

　　　　　　　 }  

　　　　 window.onload=main;  

</script>

</head>

<body>  

　　　　<div id="box">    </div>

</body>

posted @ 2017-02-24 21:22  叫西原的小橘子  阅读(109)  评论(0)    收藏  举报