jQuery-鼠标移到图片上、产生滑动图片的效果

最新推荐文章于 2022-08-25 18:41:00 发布

转载最新推荐文章于 2022-08-25 18:41:00 发布 · 854 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Kimoongee/p/6872488.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用HTML、CSS和jQuery实现的图片展示页面，当鼠标悬停在图片上时，图片会呈现半透明效果并显示关于图片的文字介绍。该页面包含多张海岸家园的美景图片，并且每张图片都有相应的描述。

index.html

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <link rel="stylesheet" href="index.css" type="text/css"/>
 7         <script type="text/javascript" src="jquery-3.2.0.min.js"></script>
 8     </head>
 9     <body>
10         <ul>
11             <li>
12                 <img src="../images/pic1.jpg" width="298" height="238">
13                 <b>海岸家园</b>
14                 <div class="text">
15                    <h3>海岸家园美景</h3>
16                    <p>清新的空气 舒适的入住坏境 给您不一样的体会</p>
17                    <span>TIME :2017.05.18</span>         
18                 </div>
19             </li>
20             <li>
21                 <img src="../images/pic2.jpg" width="298" height="238">
22                 <b>海岸家园</b>
23                 <div class="text">
24                    <h3>海岸家园美景</h3>
25                    <p>清新的空气 舒适的入住坏境 给您不一样的体会</p>
26                    <span>TIME :2017.05.18</span>         
27                 </div>
28             </li>
29             <li>
30                 <img src="../images/pic3.jpg" width="298" height="238">
31                 <b>海岸家园</b>
32                 <div class="text">
33                    <h3>海岸家园美景</h3>
34                    <p>清新的空气 舒适的入住坏境 给您不一样的体会</p>
35                    <span>TIME :2017.05.18</span>         
36                 </div>
37             </li>
38             <li>
39                 <img src="../images/pic4.jpg" width="298" height="238">
40                 <b>海岸家园</b>
41                 <div class="text">
42                    <h3>海岸家园美景</h3>
43                    <p>清新的空气 舒适的入住坏境 给您不一样的体会</p>
44                    <span>TIME :2017.05.18</span>         
45                 </div>
46             </li>
47             <li>
48                 <img src="../images/pic5.jpg" width="298" height="238">
49                 <b>海岸家园</b>
50                 <div class="text">
51                    <h3>海岸家园美景</h3>
52                    <p>清新的空气 舒适的入住坏境 给您不一样的体会</p>
53                    <span>TIME :2017.05.18</span>         
54                 </div>
55             </li>
56             <li>
57                 <img src="../images/pic6.jpg" width="298" height="238">
58                 <b>海岸家园</b>
59                 <div class="text">
60                    <h3>海岸家园美景</h3>
61                    <p>清新的空气 舒适的入住坏境 给您不一样的体会</p>
62                    <span>TIME :2017.05.18</span>         
63                 </div>
64             </li>
65         </ul>
66         <script type="text/javascript" src="index.js"></script>
67     </body>
68 </html>

index.css

 1 ul,li{
 2     list-style-type: none;
 3     margin:0px;
 4     padding:0px;
 5 }
 6 ul{
 7     
 8     width:1000px;
 9     margin:0 auto;
10 }
11 li{
12     float:left;
13     width:298px;
14     height:238px;
15     border: 1px solid #666;
16     margin:10px 3px;
17     overflow: hidden;          /*为了隐藏下面的text*/
18     position: relative;        /*这里的相对定位 一方面:为了给b的绝对定位设置位置 另一方面：只有text绝对定位后 js中的animate才会生效(因为括号内要跟方向参数)*/
19 }
20 b{    
21     display: block;
22     width:298px;
23     height:35px;
24     line-height:35px;
25     background: rgba(0,0,0,0.7);
26     text-align: center;
27     font-size:16px;
28     bottom: 0;
29     position: absolute;
30     color:#fff;
31     
32 }
33 .text{
34     width:298px;
35     height:238px;
36     text-align: center;
37     position: absolute;    
38     bottom: -238;          /*此时text的位置在li的下面238px处 因为上面的li设置了overflow:hidden;所以这里看不到*/
39     
40 }
41 h3{
42     color:#00ada7
43 
44 }
45 p{
46     width:290px;
47     color:#000;
48 }
49 span{
50     color:blueviolet;
51 }

index.js

 1 　　//图片列表
 2     $("ul>li").hover(function()        //定义一个伪类鼠标触及事件
 3         {    
 4             $(this).find("img").stop().fadeTo(500,0.5)    //当鼠标移动到图片上时,通过遍历停止所有运行的动画,获得一个淡出事件(改变了图片的透明度0.5)
 5             $(this).find(".text").stop().animate({bottom:'0'}, {duration: "fast"})
 6         },    //当鼠标移动到图片上时,通过遍历停止所有运行的动画,再移动一个动画让文本出从下边出现
 7     function()//在jquery 再定义一个方法
 8         {        
 9             $(this).find("img").stop().fadeTo(500,1) 
10             //当鼠标离开时,通过遍历停止动画在让淡出效果回去(这里是通过设置透明度为1的方法)
11             $(this).find(".text").stop().animate({bottom:'-275'}, {duration: 0})
12             //通过遍历停止动画后,再触发一个动画让原本出现的标题开始回收(实质是向下移动了 只不过速度太快看不清而已 如果想看清楚的话就将duration:0-->duration:5000即可)
13         });