码迷,mamicode.com
首页 > 其他好文 > 详细

第74天:图片导航效果

时间:2017-11-05 00:33:56      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:border   charset   nbsp   leave   script   tle   div   doctype   ima   

图片导航效果

 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>

 

第74天:图片导航效果

标签:border   charset   nbsp   leave   script   tle   div   doctype   ima   

原文地址:http://www.cnblogs.com/le220/p/7784979.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!