基于jquery hover图片遮罩层滑动
2015-07-14 09:10
288 查看
分享一款基于jquery hover图片遮罩层滑动。这是一款仿腾讯课堂的鼠标悬停经过图片遮罩透明层滑动效果。效果图如下:
在线预览 源码下载
实现的代码。
html代码:
js代码:
via:http://www.w2bc.com/Article/46125
在线预览 源码下载
实现的代码。
html代码:
<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>
js代码:
$(".con ul li").hover(function(){ $(this).find(".txt").stop().animate({height:"198px"},400); $(this).find(".txt h3").stop().animate({paddingTop:"60px"},400); },function(){ $(this).find(".txt").stop().animate({height:"45px"},400); $(this).find(".txt h3").stop().animate({paddingTop:"0px"},400); })
via:http://www.w2bc.com/Article/46125
相关文章推荐
- jQuery简介
- jQuery实现模拟marquee标签效果
- jQuery插件boxScroll实现图片轮播特效
- jQuery EasyUI简介
- 关于jQuery写插件及其演示
- jQuery插件boxScroll实现图片轮播特效
- jQuery实现模拟marquee标签效果
- jQuery插件windowScroll实现单屏滚动特效
- jQuery插件datalist实现很好看的input下拉列表
- 常用jQuery代码分享
- jquery获得当前html页面源码的方法
- jQuery实现自定义checkbox和radio样式
- jQuery实现自定义checkbox和radio样式
- 【2015.07.13周一~xxx】【读书笔记】【02】《jquery与javascript入门经典》
- jQuery Mobile 资料
- jquery checked
- jQuery实现Checkbox全选功能
- jquery表单验证使用插件formValidator
- 理解jquery的$.extend()、$.fn和$.fn.extend()
- 根据价格范围筛选汽车(路由以及JS与Jquery)