js实战之-手风琴效果

 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 *{ margin:0; padding:0; list-style:none;}
 8 #warp{position:relative; margin:20px; height:305px;}
 9 ul{ width:920px;height:305px; position:absolute; overflow:hidden;}
10 li{ float:left; width:20px;height:305px; position:relative; overflow:hidden;}
11 a{ float:right; width:20px;height:305px;position:absolute; right:0;top:0;color:#fff; font-size:12px; line-height:30px; text-align:center; text-decoration:none;}
12 </style>
13 <script>
14 window.onload=function(){
15     
16     var oUl=document.getElementById('ul1');
17     var aLi=oUl.getElementsByTagName('li');
18     var timer=null;
19     
20     for(var i=0;i<aLi.length;i++){
21         
22         aLi[i].onmouseover=function(){
23             var _this=this;
24             
25             clearInterval(timer);
26             timer=setInterval(function(){
27                     var sum=0;
28                     for(var i=0;i<aLi.length;i++){
29                            if(aLi[i]==_this) continue;
30                           var speed=(20-aLi[i].offsetWidth)/6;
31                           speed=speed>0?Math.ceil(speed):Math.floor(speed);                          
32                           aLi[i].style.width=aLi[i].offsetWidth+speed+"px";                      
33                              sum+=aLi[i].offsetWidth;
34                     }
35 
36                        _this.style.width=oUl.offsetWidth-sum+"px";            
37                 
38                 },30);
39     
40         }
41     
42 }
43     
44     
45 
46 
47 }
48 </script>
49 </head>
50 <body>
51 <div id="warp">
52     <ul id="ul1">
53         <li style="860px">
54             <img src="images/1.jpg" width="840" height="305" />
55             <a href="javascript:;" style="background:#930">第一个</a>
56         </li>
57         <li>
58             <img src="images/1.jpg" width="840" height="305" />
59             <a href="javascript:;" style="background:#006">第二个</a>
60         </li>
61         <li>
62             <img src="images/1.jpg" width="840" height="305" />
63             <a href="javascript:;" style="background:#903">第三个</a>
64         </li>
65         <li>
66             <img src="images/1.jpg" width="840" height="305" />
67             <a href="javascript:;" style="background:#609">第四个</a>
68         </li>
69     </ul>
70 </div>
71 </body>
72 </html>
一个不敬业的前端攻城狮