分享一款基于jquery hover图片遮罩层滑动。这是一款仿腾讯课堂的鼠标悬停经过图片遮罩透明层滑动效果。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

<div class="web">
<img src="data:images/course.jpg"/>
<div class="con">
<ul>
<li>
<img src="data:images/class1.jpg"/>
<div class="txt">
<h3>IT培训</h3>
<p>为您铺就成为IT大神的在线学习之路</p>
</div>
</li>
<li>
<img src="data:images/class2.jpg"/>
<div class="txt">
<h3>语言学习</h3>
<p>英语、韩语、日语各类语言课程一网打尽</p>
</div>
</li>
<li>
<img src="data:images/class3.jpg"/>
<div class="txt">
<h3>职业技能</h3>
<p>传授会计师、建筑师等各类考证学习宝典</p>
</div>
</li>
<li>
<img src="data:images/class4.jpg"/>
<div class="txt">
<h3>中小学/大学</h3>
<p>小学、初中、高中各科课程在线辅导</p>
</div>
</li>
<li>
<img src="data:images/class5.jpg"/>
<div class="txt">
<h3>兴趣爱好</h3>
<p>吉他、摄影等各类兴趣教程让你成为生活达人</p>
</div>
</li>
<li>
<img src="data: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 hover图片遮罩层滑动的更多相关文章

  1. 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  2. 纯CSS3写的10个不同的酷炫图片遮罩层效果

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  3. 基于jQuery的图片相册滑出放大插件

    今天给大家带来一款基于jQuery的图片相册滑出放大插件.点击相册图片,展示该图片.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗..效 ...

  4. jQuery左侧图片右侧文字滑动切换代码

    分享一款jQuery左侧图片右侧文字滑动切换代码.这是一款基于jQuery实现的列表图片控制图片滑动切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div cla ...

  5. 一款基于jQuery的仿百度首页滑动选项卡

    今天给大家分享一款基于jQuery的仿百度首页滑动选项卡.这款选项卡适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   ...

  6. 一款基于jQuery的图片场景标注提示弹窗特效

    今天给大家分享一款基于jQuery的图片场景标注提示弹窗特效,这款实例适合在图片上标注某个物件,单击弹出详情说明,兼容360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之 ...

  7. 基于jQuery悬停图片变色放大特效

    分享一款基于jQuery悬停图片变色放大特效是一款响应式鼠标悬停图片放大效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div style="width ...

  8. 一款基于jQuery的图片分组切换焦点图插件

    这是一款基于jQuery的图片切换焦点图插件,这款jQuery焦点图插件的特点是图片可以分组切换,也就是说一次可以切换多张图片,相比其他焦点图插件,它能节省更多的空间,可以向用户展示更多的图片,非常实 ...

  9. 基于jQuery的图片加载loading效果插件

    基于jQuery的图片加载loading效果插件 图片loading的效果是网页中比较常见的,尤其是对大图片,loading效果让用户能够明白图片加载的过程. 实现思路也是比较简单的: $.fn.Lo ...

随机推荐

  1. shell小工具查看Hadoop中System.out输出的日志

    #!/bin/bashrm ~/log.logecho "Please Input JobID:"read NAMEmap_log="/home/grid/hadoop- ...

  2. C# Deldegate的使用

    Delegate类简介 ------------------------ 命名空间:System 程序集:mscorlib(在 mscorlib.dll 中) 委托(Delegate)类是一种数据结构 ...

  3. Swift 类型检查与类型转换

    前言 在 Swift 语言中一般使用 is 关键字实现类型检查,使用 as 关键字实现类型转换,除此之外还可以通过构造器和方法来实现类型转换. 1.类型检查 1.1 使用 is 检查 类型检查操作符 ...

  4. mysql主从复制配置问题

    一,基本步骤 1,创建在主从数据上都创建复制账号,权限选上super, replication slave , replication master(选上这个可以方便从库变成主库): 2,配置主库和备 ...

  5. golang ---image

    package main import ( "image" "image/color" "image/gif" "os" ...

  6. SharePoint 2013 Troubleshooting——启用 Developer Dashboard

    SharePoint 2010的管理员和开发者可能对SharePoint Developer Dashboard(开发人员仪表盘)很熟悉.在SharePoint 2013这个工具已经被大范围的改写了, ...

  7. U811.1接口EAI系列之四--委外订单生成--VB语言

    委外订单主细表.子个构成需求.具体代码与参数说明. 下面调用的通用方法在: http://www.cnblogs.com/spring_wang/p/3393147.html 作者:王春天 2013- ...

  8. grafana 的面板设置

    1.工作中我们会计算连个字段的四则运算

  9. 如何使用 t-sql 更新数据库中日期字段的部分数据(年?月?日?时?分?秒?)

    嗯,从网上找到了一些内容,综合利用了sql server的一些内置方法 首先是 convert 方法:https://msdn.microsoft.com/zh-cn/library/ms187928 ...

  10. MariaDB/MySql 服务消失无法启动

    今天启动电脑打开数据库发现这么一个错误:  2003 can't connect to mysql server on localhost 10038  无奈去查看了服务,发现mysql服务消失了,猜 ...