图片导航效果
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 li{ 12 list-style: none; 13 } 14 a{ 15 text-decoration: none; 16 } 17 .wrap{ 18 width: 752px; 19 border:1px solid #c1c1c1; 20 padding: 10px 0 0 10px; 21 margin:100px auto; 22 overflow: hidden; 23 } 24 .wrap li{ 25 width: 178px; 26 height: 125px; 27 float: left; 28 margin:0 10px 10px 0; 29 position: relative; 30 overflow: hidden; 31 32 } 33 .wrap li p{ 34 width: 178px; 35 text-align: center;; 36 background-color: #6a6a6a; 37 background-position: 5px 0; 38 color: #ffffff; 39 position: absolute; 40 left:0; 41 bottom:-26px; 42 } 43 </style> 44 <script src="jquery-1.11.1.min.js"></script> 45 <script> 46 $(document).ready(function(){ 47 $(".wrap li").append("<div></div><p>全栈，你值得拥有</p>").children("div").fadeTo(0,0.5).next("p").each(function(index,ele){//ele指向当前对象p 48 $(ele).css("background-position","5px -"+index*25+"px"); 49 }).parent(); 50 51 $(".wrap li").mouseenter(function(){ 52 $(this).children("div,p").stop().animate({ 53 "bottom":0, 54 55 },400); 56 57 }).mouseleave(function(){ 58 $(this).children("div,p").stop().animate({ 59 "bottom":"-26px" 60 },400); 61 }); 62 63 }); 64 </script> 65 </head> 66 <body> 67 <div class="wrap"> 68 <ul> 69 <li><a href=""><img src="images/01.JPG" alt=""></a></li> 70 <li><a href=""><img src="images/02.JPG" alt=""></a></li> 71 <li><a href=""><img src="images/03.JPG" alt=""></a></li> 72 <li><a href=""><img src="images/04.JPG" alt=""></a></li> 73 <li><a href=""><img src="images/05.JPG" alt=""></a></li> 74 <li><a href=""><img src="images/06.JPG" alt=""></a></li> 75 <li><a href=""><img src="images/07.JPG" alt=""></a></li> 76 <li><a href=""><img src="images/08.JPG" alt=""></a></li> 77 </ul> 78 </div> 79 </body> 80 </html>
运行效果：
