基于jquery hover图片遮罩层滑动
先上效果图:
鼠标移动图片时，下面字上升
html 及jquery代码如下:
其实是好简单的.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" contend="IE=edge, chrome=1"> <title>基于jquery hover图片遮罩层滑动 </title> <meta name="description" content=""> <meta name="keywords" content=""> <link rel="stylesheet" href=""> <script src="./js/jquery.js"></script> </head> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;}/*清楚内外默认边距*/ body{background:url("images/bg.jpg");} .web{width:985px;height:620px;background:#cb5412;margin:0px auto;} .con{width:950px;height:435px;background:#fff;margin:27px auto;padding-left:25px;padding-top:25px;} .con ul li{width:297px;height:198px;float:left;margin-right:15px;margin-bottom:15px;position:relative;overflow:hidden;cursor:pointer;} .txt{width:297px;height:45px;background:rgba(0,0,0,0.6);/*透明背景色，不透明其文字内容*/position:absolute;left:0;bottom:0;color:#fff;font-family:"微软雅黑";} .txt h3{font-size:20px;font-weight:100;height:45px;text-align:center;line-height:45px;} .txt p{font-size:14px;text-align:center;} </style> <body> <div class="web"> <img src="images/course.jpg"/> <div class="con"> <ul> <li> <img src="images/class1.jpg"/> <div class="txt"> <h3>IT培训</h3> <p>为您铺就成为IT大神的在线学习之路</p> </div> </li> <li> <img src="images/class2.jpg"/> <div class="txt"> <h3>语言学习</h3> <p>英语、韩语、日语各类语言课程一网打尽</p> </div> </li> <li> <img src="images/class3.jpg"/> <div class="txt"> <h3>职业技能</h3> <p>传授会计师、建筑师等各类考证学习宝典</p> </div> </li> <li> <img src="images/class4.jpg"/> <div class="txt"> <h3>中小学/大学</h3> <p>小学、初中、高中各科课程在线辅导</p> </div> </li> <li> <img src="images/class5.jpg"/> <div class="txt"> <h3>兴趣爱好</h3> <p>吉他、摄影等各类兴趣教程让你成为生活达人</p> </div> </li> <li> <img src="images/class6.jpg"/> <div class="txt"> <h3>亲子学堂</h3> <p>教你如何和宝宝一起成长</p> </div> </li> </ul> </div> </div> </body> <script> $(document).ready(function() { $('.con ul li').hover(function() { $(this).find('.txt').stop().animate({height:"198px"},500); $(this).find('.txt h3').stop().animate({paddingTop:"60px"},500); //这里注间padding-top写法 },function() { $(this).find('.txt').stop().animate({height:"45px"},500); $(this).find('.txt h3').stop().animate({paddingTop:"0px"},500); //这里注间padding-top写法 }); }); </script> </html>
