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>