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 });
images
效果图
