1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{margin:0;padding:0;} 8 ul{list-style: none;} 9 img{display: block; border:0;} 10 /*!**!/本来li左浮动，不能撑开盒子，但是这里给父盒子加了*/ 11 /*overflow:hidden;后相当于清除了浮动的影响，因此使得wrap有了宽高；**!*/ 12 .wrapper{ 13 width: 752px; 14 border:1px solid #ccc; 15 padding: 10px 0 0 10px; 16 overflow: hidden; 17 margin:100px auto; 18 19 } 20 .wrapper li{ 21 float: left; 22 margin:0 10px 10px 0; 23 width: 178px; 24 height: 125px; 25 overflow: hidden; 26 position: relative; 27 } 28 .wrapper li div,.wrapper li p{ 29 width:178px; 30 height: 25px; 31 position: absolute; 32 font-size:14px; 33 text-align: center; 34 line-height: 25px; 35 color:white; 36 left:0; 37 bottom:-25px; 38 } 39 .wrapper li div{ 40 background-color:#000; 41 } 42 .wrapper li p{ 43 background: url(images/bg.png) no-repeat 5px 0; 44 } 45 46 </style> 47 <script type="text/javascript" src="../jquery-1.11.1.min.js"></script> 48 <script type="text/javascript"> 49 $(function(){ 50 var div = $("<div></div>"),speed = 388,$p = $(".wrapper p"); 51 $p.before(div); 52 $(".wrapper div").fadeTo(0,0.5);//不透明度 53 $p.each(function(index,ele){ 54 var y = index * 25; 55 $(ele).css("background-position","5px-" + y + "px"); 56 }); 57 58 $(".wrapper li").hover(function(){ 59 $(this).children("div,p").stop().animate({"bottom":0},speed); 60 },function(){ 61 $(this).children("div,p").stop().animate({"bottom":-26},speed); 62 }); 63 }); 64 </script> 65 </head> 66 <body> 67 <div class="wrapper"> 68 <ul> 69 <li><a href="###"><img src="images/01.jpg" alt=""/></a><p>百度一下，你就知道</p></li> 70 <li><a href="###"><img src="images/02.jpg" alt=""/></a><p>百度一下，你就知道</p></li> 71 <li><a href="###"><img src="images/03.jpg" alt=""/></a><p>百度一下，你就知道</p></li> 72 <li><a href="###"><img src="images/04.jpg" alt=""/></a><p>百度一下，你就知道</p></li> 73 <li><a href="###"><img src="images/05.jpg" alt=""/></a><p>百度一下，你就知道</p></li> 74 <li><a href="###"><img src="images/06.jpg" alt=""/></a><p>百度一下，你就知道</p></li> 75 <li><a href="###"><img src="images/07.jpg" alt=""/></a><p>百度一下，你就知道</p></li> 76 <li><a href="###"><img src="images/08.jpg" alt=""/></a><p>百度一下，你就知道</p></li> 77 </ul> 78 </div> 79 </body> 80 </html>