360图片导航效果 

 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>

 

posted @ 2018-01-01 18:11  前端极客  阅读(337)  评论(0)  编辑  收藏  举报