jQuery實現的手風琴效果
阿新 • • 發佈：2018-01-01
wrap this utf wid src sele height add doc
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 ul{ 12 list-style: none; 13} 14 15 .wrap { 16 width: 1010px; 17 margin: 100px auto 0; 18 } 19 .wrap li{ 20 width: 200px; 21 height: 400px; 22 float: left; 23 } 24 </style> 25 <script src="../jquery-1.11.1.min.js"></script> 26 <script> 27 $(document).ready(function () { 28 $(‘.wrap li‘).each(function(i,ele){ 29 $(ele).css("background","url(images/"+ (i + 1) +".jpg)"); 30 }).mouseenter(function(){ 31 $(this).stop().animate({width:600},500).siblings(‘li‘).stop().animate({width:100},500) 32 }).mouseleave(function(){ 33 $(‘.wrap li‘).stop().animate({width:200},500); 34 35 }) 36 }); 37 </script> 38 </head> 39 <body> 40 <div class="wrap"> 41 <ul> 42 <li></li> 43 <li></li> 44 <li></li> 45 <li></li> 46 <li></li> 47 </ul> 48 </div> 49 </body> 50 </html>
jQuery實現的手風琴效果