分享一款基于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. k8s源码分析之kubelet

    一.概述 二.Kubelet对象创建过程:(pkg/kubelet/kubelet.go ) NewMainKubelet 正如名字所示,主要的工作就是创建 Kubelet 这个对象,它包含了 kub ...

  2. Android MD5校验码的生成与算法实现

    在Java中,java.security.MessageDigest (rt.jar中)已经定义了 MD5 的计算,所以我们只需要简单地调用即可得到 MD5 的128 位整数.然后将此 128 位计 ...

  3. C# 图片识别(支持21种语言)

    图片识别的技术到几天已经很成熟了,只是相关的资料很少,为了方便在此汇总一下(C#实现),方便需要的朋友查阅,也给自己做个记号. 图片识别的用途:很多人用它去破解网站的验证码,用于达到自动刷票或者是批量 ...

  4. linux大文件传输

    Mysql复制,初始化服务器,备份/还原等大文件复制是很常见的任务,他们完成的实际任务可以概括为: 1,(可选)压缩文件 2,发送文件 3,解压文件 4,验证文件一致性 下面介绍几种方法: 1,最简单 ...

  5. 【转载】Chrome插件开发 尝试

    本来来自 http://www.cnblogs.com/rufus-hua/ 1.新建文件夹 如图:整个项目的结构 2.新建一个名为manifest.json的文件,编码模式为utf-8,(可以先建好 ...

  6. 【转载并整理】javaweb单点登录

    很好的一篇,讲述原理的文章: http://www.importnew.com/22863.html https://www.cnblogs.com/Leo_wl/p/6111623.html 京东s ...

  7. Android 数据分析系列一:sharedPreferences

    Android数据存储方式,包括下面四种: 1. Shared Preferences:用来存储"key-value"paires格式的数据,它是一个轻量级的键值存储机制,只可以存 ...

  8. 解决Myeclipse中导入自定义的配色方案后,JSP中的js代码块为白色背景的问题

    捣鼓了大半个上午,终于搞定.这样设置就可以了: 点击MyEclipse上方的菜单栏中的window菜单.选择Preferences菜单项.在弹出的窗口的左侧树形菜单依次选择:MyEclipse.Fil ...

  9. 在ubuntu16安装supervisor 并 启动 .net core.

    1. 安装supervisor apt-get install supervisor 2.新建supervisor配置文件.使用以下命令在linux 命令行 echo_supervisord_conf ...

  10. macbook安装homebrew并更换清华源

    1.官网brew.sh复制安装脚本. 2.自动安装完成后,更换为清华源来加快速度.网址为:https://mirrors.tuna.tsinghua.edu.cn/help/homebrew 3.更换 ...