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. PostgreSQL 9.3发布

    9月9日,PostgreSQL全球开发组宣布了9.3版发布的消息.从2010年9.0版开始,PostgreSQL已经连续四个版本稳定地按时在每年9月中旬发布,从一个侧面也显示了开发团队的强大实力. 9 ...

  2. CSS3 Flexbox不迷路指南

    Flexbox早有耳闻,但是决定切实尝试一番,还是因为看了这条围脖: 我觉得用flexbox可以实现,但是发觉无从下手,属性特性都不了解.趁此机会,学习下. 英文原版参考资料在这里:A Complet ...

  3. Btree 索引

    Btree 索引 索引是帮助数据库高效获取数据的一种数据结构,通过提取句子主干,就可以得到索引的本质. m-way查找树 如果想了解Btree,需要首先了解m-way数据结构. m-way查找树是是一 ...

  4. 在SqlServer2008R2中，在一张表上加上insert、update、delete触发器（带游标）

    在日常工作中,在SqlServer2008R2中,需要向一张表上加上触发器,监控插入.更新.删除. --一个触发器内三种INSERT,UPDATE,DELETE状态 IF exists(select ...

  5. HttpResponseMessage 调用.net web api

    // // GET: /Home/ //释迦苦僧 public ActionResult Index() { HttpClient client = new HttpClient(); client. ...

  6. iOS-----正则表达式

    摘要: 正则表达式在字符串检验和查找中用处很广,IOS中也有其支持的类. 正则表达式在iOS开发中的应用 正则表达式在字符串查找,替换,检测中的应用非常广泛,正则表达式是什么,有怎样的语法,可以参考我 ...

  7. Spill data to tempdb

    查看Execution Plan时,在Sort Operator上,发现一个Warning:Operator used tempdb to spill data during execution wi ...

  8. Sql Server系列：DBCC命令

    DBCC(Database Base Consistency Checker,数据库一致性检查程序)命令用于验证数据库完整性.查找错误和分析系统使用情况等. 1. DBCC CHECKALLOC 检查 ...

  9. jQuery源码分析系列(31) : Ajax deferred实现

    AJAX的底层实现都是浏览器提供的,所以任何基于api上面的框架或者库,都只是说对于功能的灵活与兼容维护性做出最优的扩展 ajax请求的流程: 1.通过 new XMLHttpRequest 或其它的 ...

  10. 应用程序框架实战十四:DDD分层架构之领域实体（基础篇）

    上一篇,我介绍了自己在DDD分层架构方面的一些感想,本文开始介绍领域层的实体,代码主要参考自<领域驱动设计C#2008实现>,另外参考了网上找到的一些示例代码. 什么是实体 由标识来区分的 ...