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. ASP.NET MVC 从零开始 - 自动化部署（其二）

    这篇文章是从我的 github 博客 http://lxconan.github.io 导入的. 这是这个系列的第五篇了,前四篇请参见: ASP.NET MVC 从零开始 – Create and R ...

  2. 【Prince2是什么】PRINCE2认证之PRINCE2的思维结构

    前两讲我们介绍了PRINCE2衡量绩效的六大要素和四大管理步骤,今天我们继续进行PRINCE2思维结构的介绍. PRINCE2自身有一个非常强大且坚固的思维结构,这个结构有四大元素组成.分别是1原则, ...

  3. 使用angular中ng-repeat ， track by的用处

    我们见到最简单的例子是: <div ng-repeat="link in links" ></div> 如果item的值有重复的,比如links=[&quo ...

  4. iOS-App上架流程

    前言:作为一名IOS开发者,把开发出来的App上传到App Store是必须的.下面就来详细介绍下具体流程. 1.打开苹果开发者中心:https://developer.apple.com 打开后点击 ...

  5. 使用Java纯代码实现MySQL的连接

      建立数据库 1. 点击连接-->MySQL: 输入连接名 . 主机名/IP地址 .端口 .用户名.密码(没有密码就省略),然后点击确定,建立的表格是灰色表示关闭状态,双击开启 2. 重新创建 ...

  6. css绝对定位如何在不同分辨率下的电脑正常显示定位位置？

    有时候我们在写页面中,会发现绝对定位的父级元素已经相对定位了,但是在不同分辨率的电脑下,绝对定位还是会错乱,似乎父级的相对定位并没有起了作用. 首先要明白如下几个原理: 1.笔记本电脑的分辨率一般为1 ...

  7. 在计算机 . 上没有找到服务 WAS

    添加的程序不全导致或者服务没开启导致 重新打开IIS,刷新一下 发现已经可以了,不再标红报错了

  8. LINQ系列：Linq to Object相等操作符

    相等操作符通过比较两个序列来检查它们相应的元素是否相同.如果两个序列有相同的元素,并且对应元素的值相同,则认为这两个序列是相等的. SequenceEqual操作符判定两个集合是否相等.判定是通过并行 ...

  9. ExtJS面向对象

    序言 1.ExtJs是一套很好的后台框架.现在很流行的,我们要会. 2.这是我写ExtJs的第一篇,以后会写很多直到把这框架运用的炉火纯青,走火入魔. ExtJs中的命名空间 我是做.net的,这命名 ...

  10. 【Win10 开发】读取PDF文档

    关于用来读取PDF文档的内容的API,其实在Win8.1的时候就有,不过没关系,既咱们讨论的是10的UAP,连同8.1的内容也包括进去,所以老周无数次强调:把以前的内容学好了,就可以在不学习任何新知识 ...