手风琴效果：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>手风琴效果</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 list-style: none; 11 } 12 div{ 13 width: 1200px; 14 height: 400px; 15 margin: 100px auto; 16 border:1px solid red; 17 overflow: hidden; 18 } 19 div li{ 20 width: 240px; 21 height: 400px; 22 float: left; 23 } 24 div ul{ 25 width: 1300px; 26 } 27 </style> 28 </head> 29 <body> 30 <div> 31 <ul> 32 <li></li> 33 <li></li> 34 <li></li> 35 <li></li> 36 <li></li> 37 </ul> 38 </div> 39 </body> 40 </html> 41 <script src="animate.js" type="text/javascript"></script><!--引入动画js--> 42 <script> 43 var box=document.getElementsByTagName("div")[0]; 44 var lis=box.children[0].children; 45 for(var i=0;i<=lis.length;i++){ 46 lis[i].style.backgroundImage="url(images/"+(i+1)+".jpg)"; 47 lis[i].onmouseover=function(){ 48 for(var i=0;i<lis.length;i++){ 49 animate(lis[i],{width:100})//调用动画函数 li宽度变成100 50 } 51 animate(this,{width:800})//当前li宽度改为800 52 } 53 lis[i].onmouseout=function(){ 54 for(var i=0;i<lis.length;i++){ 55 animate(lis[i],{width:240})//鼠标移出每个li宽度都改为初始值 56 } 57 } 58 } 59 </script>
运行效果：
