jQuery css3鼠标悬停图片显示遮罩层动画特效

效果体验：http://hovertree.com/texiao/jquery/39/

效果图：

源码下载：http://hovertree.com/h/bjaf/q9ii3dfq.htm

代码如下：

<!doctype html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>jQuery炫酷鼠标滑过图片显示遮罩层特效 - 何问起</title><base target="_blank" />

<!--可无视-->

<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/39/css/normalize.css" />

<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/39/css/default.css">

<link rel="stylesheet" href="http://hovertree.com/texiao/jquery/39/css/base.css" />

<!--必要样式-->

<link rel="stylesheet" href="http://hovertree.com/texiao/jquery/39/css/style.css" />

<!--[if IE]>

<script src="http://hovertree.com/texiao/html5/4/html5shiv.min.js"></script>

<![endif]-->

</head>

<body>

<div id="main">

<div class="container">

<nav>

<ul>

<li><a target="_self" href="http://hovertree.com/texiao/jquery/39/index.html" class="active">Slide In Bottom</a></li>

<li><a target="_self" href="http://hovertree.com/texiao/jquery/39/index2.html">Slide In Top</a></li>

<li><a target="_self" href="http://hovertree.com/texiao/jquery/39/index3.html">Slide In Left</a></li>

<li><a target="_self" href="http://hovertree.com/texiao/jquery/39/index4.html">Slide In Right</a></li>

<li><a target="_self" href="http://hovertree.com/texiao/jquery/39/index5.html">Icon Border Animate</a></li>

<li><a target="_self" href="http://hovertree.com/texiao/jquery/39/index6.html">Icon Slide In</a></li>

</ul>

</nav><!-- /nav -->

<div id="effect-1" class="effects clearfix">

<div class="img">

<img src="http://hovertree.com/texiao/jquery/39/img/jpg/1.jpg" alt="">

<div class="overlay">

<a href="http://hovertree.com/" class="expand">+</a>

<!-- <a class="close-overlay hidden">x</a> -->

</div>

</div>

<div class="img">

<img src="http://hovertree.com/texiao/jquery/39/img/jpg/2.jpg" alt="">

<div class="overlay">

<a href="http://hovertree.com/" class="expand">+</a>

<a class="close-overlay hidden">x</a>

</div>

</div>

<div class="img">

<img src="http://hovertree.com/texiao/jquery/39/img/jpg/3.jpg" alt="">

<div class="overlay">

<a href="http://hovertree.com/" class="expand">+</a>

<a class="close-overlay hidden">x</a>

</div>

</div>

<div class="img">

<img src="http://hovertree.com/texiao/jquery/39/img/jpg/4.jpg" alt="">

<div class="overlay">

<a href="http://hovertree.com/" class="expand">+</a>

<a class="close-overlay hidden">x</a>

</div>

</div>

</div>

</div><!-- /.container -->

</div>

<script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-2.2.1.min.js"></script>

<script type="text/javascript" src="http://hovertree.com/texiao/jquery/39/js/modernizr.js"></script>

<script type="text/javascript">

$(document).ready(function(){

if (Modernizr.touch) {

// show the close overlay button

$(".close-overlay").removeClass("hidden");

// handle the adding of hover class when clicked

$(".img").click(function(e){

if (!$(this).hasClass("hover")) {

$(this).addClass("hover");

}

});

// handle the closing of the overlay

$(".close-overlay").click(function(e){

e.preventDefault();

e.stopPropagation();

if ($(this).closest(".img").hasClass("hover")) {

$(this).closest(".img").removeClass("hover");

}

});

} else {

// handle the mouseenter functionality

$(".img").mouseenter(function(){

$(this).addClass("hover");

})

// handle the mouseleave functionality

.mouseleave(function(){

$(this).removeClass("hover");

});

}

});

</script>

</body>

</html>

转自：http://hovertree.com/h/bjaf/q9ii3dfq.htm

更多特效：http://www.cnblogs.com/roucheng/p/texiao.html

jQuery css3鼠标悬停图片显示遮罩层动画特效的更多相关文章

  1. CSS3鼠标悬停图片上浮显示描述代码

    效果:http://hovertree.com/texiao/css3/20/ 效果图: 代码如下: <!doctype html> <html lang="zh" ...

  2. 简单的CSS3鼠标滑过图片标题和遮罩层动画特效

    此文转自:http://www.cnblogs.com/w2bc/p/5735300.html,仅供本人学习参考,版权归原作者所有!   这是一款使用CSS3制作的简单的鼠标滑过图片标题和遮罩层动画特 ...

  3. HTML5+CSS3鼠标悬停图片特效

    点击预览效果            下载该特效: HTML5+CSS3鼠标悬停图片特效.zip 特效说明: 一款HTML5+CSS3鼠标悬停图片事件网页特效,集合了最流行鼠标悬停图片文字.图片动画移动 ...

  4. 15款css3鼠标悬停图片动画过渡特效

    分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  5. css3鼠标悬停图片边框线条动画特效

    css3鼠标经过内容区时,边框线条特效效果制作.   html: <div class="strength grWidth hidden"> <div class ...

  6. 纯css3鼠标经过图片显示描述特效

    http://***/Article/5582 今天给大家带来的是用css3技术实现鼠标经过图片,显示图片描述的动画效果.鼠标经过图片时,图片动画缩小并渐变显示描述.我们一起看看效果图: 在线预览   ...

  7. CSS3鼠标悬停图片动画

    鼠标放到图片上后: demo地址:demo div: <div class="wai"> <a href="#"> <div cl ...

  8. 鼠标hover图片时遮罩层匀速上升显示内容top、定位

    1.html <div class="div1">   <div class="div11">   <p >Dolor nu ...

  9. css3鼠标悬停图片渐显飞入效果

    body程序: <div id="bei"> <div id="img"><img src="xianzi.png&qu ...

随机推荐

  1. [.net 面向对象程序设计进阶] (14) 缓存(Cache) (一) 认识缓存技术

    [.net 面向对象程序设计进阶] (14) 缓存(Cache)(一) 认识缓存技术 本节导读: 缓存(Cache)是一种用空间换时间的技术,在.NET程序设计中合理利用,可以极大的提高程序的运行效率 ...

  2. 在C#代码中应用Log4Net（五）将Log4Net正确地封装在自己的类库中并进行调用

    前面的几篇文章已经比较完整地解释了怎么使用Log4Net,但是我们可能需要将Log4Net的日志类封装在自己的类库中,以便C/S或B/S程序进行调用.下面的示例程序简单地分为两层,一个是应用程序层We ...

  3. js中的DOM事件与对象

    概念图 document.getElementById("bb"); 根据id找到bb,只能找一个哦 var aa = document.getElementById(" ...

  4. Wakatime 测试工作时间

    Wakatime – 现在几点了,你在做什么呢 前面提到了一个用来QS自己的工具Clarify.这次介绍一个专门给程序员用的工具.大家都知道一万小时定律,但我究竟写java写了多久了呢?WakaTim ...

  5. iOS-APNS证书申请与使用

    首先,需要一个pem的证书,该证书需要与开发时签名用的一致. 具体生成pem证书方法如下: 1. 登录到 iPhone Developer Connection Portal(http://devel ...

  6. 基于1.3.3版本tooltip的datagrid单元格tip实现

    基于1.3.3版本tooltip的datagrid单元格tip实现 2013年05月25日 ⁄ datagrid ⁄ 共 6122字 ⁄ 评论数 26 ⁄ 被围观 7,033 views+ 文章目录 ...

  7. datagrid界面，链接数据库读取数据

    1.学生列表的 HTML部分 <script type="text/javascript"> $(function(){ //创建dataGrid $("#d ...

  8. SSIS Design1: 源数据提取

    数据量的大小由两个方面决定:行的宽度和数据行的数量,为了减少ETL运行的时间,可以从源数据的提取上做优化,从数据源的输入上控制数据的质量和大小,减少转换和IO. 一,减少行的宽度 1,只加载需要的数据 ...

  9. 前端MVVM框架设计及实现（一）

    最近抽出点时间想弄个dom模块化的模板引擎,不过现在这种都是MVVM自带的,索性就想自己造轮子写一个简单的MVVM框架了 借鉴的自然还是从正美的avalon开始了,我记得还是去年6月写过一个系列的av ...

  10. 【彩票】彩票预测算法(一)：离散型马尔可夫链模型C#实现

    前言:彩票是一个坑,千万不要往里面跳.任何预测彩票的方法都不可能100%,都只能说比你盲目去买要多那么一些机会而已. 已经3个月没写博客了,因为业余时间一直在研究彩票,发现还是有很多乐趣,偶尔买买,娱 ...