360图片导航效果

最新推荐文章于 2025-08-08 17:07:36 发布

转载最新推荐文章于 2025-08-08 17:07:36 发布 · 81 阅读

文章标签：

本文介绍了一种利用CSS浮动属性结合jQuery实现图片及其描述文字的动态显示效果的方法。通过设置浮动样式，使得图片能够水平排列，并使用jQuery来实现鼠标悬停时文字从底部淡入的效果。文章详细介绍了具体的HTML结构、CSS样式以及jQuery脚本代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 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>