分享一款基于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. eclipse将android项目生成apk并且给apk签名

    转载:http://www.cnblogs.com/tianguook/archive/2012/09/27/2705724.html 生成apk最懒惰的方法是:只要你运行过android项目,到工作 ...

  2. 【集合框架】JDK1.8源码分析之TreeMap(五)

    一.前言 当我们需要把插入的元素进行排序的时候,就是时候考虑TreeMap了,从名字上来看,TreeMap肯定是和树是脱不了干系的,它是一个排序了的Map,下面我们来着重分析其源码,理解其底层如何实现 ...

  3. C# string.format、string.connect和+=运算 效率计算

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Stri ...

  4. git使用详细介绍

    1. Git概念 1.1. Git库中由三部分组成        Git 仓库就是那个.git 目录,其中存放的是我们所提交的文档索引内容,Git 可基于文档索引内容对其所管理的文档进行内容追踪,从而 ...

  5. configure.ac:32: error: possibly undefined macro: AC_DEFINE

    在ubuntu 下编译snappy时,在检查依赖关系时,处理autoconf的包时,在相关依赖包都已经安装的情况下,报如下错误,死活不过. configure.ac:32: error: possib ...

  6. Understanding virtualxid &amp;&amp; transactionid

    对pg_locks视图中的virtualxid和transactionid字段感到困惑,经查阅资料,特此在此整理一下学习内容: pg_locks Columns Name Type Reference ...

  7. JQuery 的几个有用的技巧

    JQuery代码 /* 新窗口打开链接:JQuery filter attr * 禁止鼠标弹出右键菜单:DOM contextmenu * 回到页面顶端:DOM scrollTo * 动态更换Css样 ...

  8. 序列号多个input输入demo

    <input class="inputs" type="text" maxlength="4" /> <input cla ...

  9. 关于常用的编码工具如何引入jar包

    myeclipse和eclipse(差不多)引入jar包: 普通项目: 1.对准你的项目创建一个文件夹名字尽量命名成lib(注意要和src平级,不要在src下创建文件夹). 2.将下载好的依赖放到li ...

  10. 《LeetBook》LeetCode题解(2):Add Two Numbers [M]

    我现在在做一个叫<leetbook>的免费开源书项目,力求提供最易懂的中文思路,目前把解题思路都同步更新到gitbook上了,需要的同学可以去看看 书的地址:https://hk029.g ...