代码改变世界

js写的一个简单的百叶窗效果！

2012-08-10 17:26  未来上帝  阅读(2735)  评论(4)  编辑  收藏  举报

在博客园总是欣赏别人的作品和记录 ，这次自己也顺手写了效果

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>百叶窗效果</title>
 6 <style>
 7     ul{margin:0; padding:0; text-align:left; width:400px; list-style:none; border:1px solid black;}
 8     ul li{ width:200px; height:50px; background:#0CF;margin:2px 0;}
 9 </style>
10 </head>
11 
12 <body>
13 <ul>
14     <li></li>
15     <li></li>
16     <li></li>
17     <li></li>
18     <li></li>
19     <li></li>
20 </ul>
21 <input id="btn1" type="button" value="start" />
22 </body>
23 </html>

下面是js代码

 1 <script>
 2     window.onload = function(){
 3         var btn = document.getElementById("btn1");
 4         var aLi = document.getElementsByTagName("li");
 5         var timer = null;
 6         var iNum = 0;
 7         btn.onclick = function(){
 8             setTimeout(function(){
 9                 timer = setInterval(function(){
10                     if(iNum == aLi.length){
11                         clearInterval(timer);
12                         return false;
13                     }
14                     startMove(aLi[iNum]);
15                     iNum++;
16                 },440);
17             },100);
18         }
19         
20         function startMove(obj){
21             var _timer = null;
22             var intance = 0;
23             _timer = setInterval(function(){
24                 
25                 if(intance == 200)
26                 {
27                     clearInterval(_timer);    
28                 }
29                 obj.style.marginLeft = intance+"px";
30                 intance += 10;
31                 },20);
32         }
33     }
34 </script>

效果很简单！