第74天：jQuery实现图片导航效果
图片导航效果
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>
运行效果：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-11-04 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读