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 div{ 12 width: 2500px; 13 height: 900px; 14 } 15 ul{ 16 list-style: none; 17 } 18 .wrap{ 19 width: 1500px; 20 margin: 100px auto 0; 21 } 22 .wrap li{ 23 width: 300px; 24 height: 900px; 25 float: left; 26 } 27 </style> 28 <script type="text/javascript" src="jquery-1.11.1.min.js" ></script> 29 <script> 30 $(document).ready(function(){ 31 $(".wrap li").each(function (i,ele) { 32 $(ele).css("background","url(img/"+ (i + 1) +".jpg)"); 33 }).mouseenter(function () { 34 $(this).stop().animate({width : 900},500).siblings("li").stop().animate({ 100},500); 35 36 }).mouseleave(function(){ 37 $(".wrap li").stop().animate({300},600); 38 }); 39 }); 40 </script> 41 </head> 42 <body> 43 <div class="wrap"> 44 <ul> 45 <li></li> 46 <li></li> 47 <li></li> 48 <li></li> 49 <li></li> 50 <li></li> 51 <li></li> 52 53 54 </ul> 55 56 </div> 57 </body> 58 </html>
然而请大家留意第28行代码中的src在这里我们导入的是jquery-1.11.1.min的外链文件，之后我将整个文件打包放在win10系统上显示却是乱码，所以想放在这里请各位大牛给点解决方案