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 MVC实现长轮询，与jQuery.AJAX即时双向通信

    两周前用长轮询做了一个Chat,并移植到了Azure,还写了篇博客http://www.cnblogs.com/indream/p/3187540.html,让大家帮忙测试. 首先感谢300位注册用户 ...

  2. I/O重定向的原理和实现

    在Unix系统中,每个进程都有STDIN.STDOUT和STDERR这3种标准I/O,它们是程序最通用的输入输出方式.几乎所有语言都有相应的标准I/O函数,比如,C语言可以通过scanf从终端输入字符 ...

  3. 记一个简单的保护if 的sh脚本

    真是坑爹,就下面的sh,竟然也写了很久! if [ `pwd` != '/usr/xx/bin/tomcat' ] then echo "rstall is not allowed in c ...

  4. WPF入门教程系列二十——ListView示例(二)

    第四步.WPF后台逻辑代码编写 在后台用Entity Framework 6.1的Code First方式获取数据库中的数据.同时,在“刷新”按钮的方法中进行数据绑定.操作步骤如下: 1)  在“刷新 ...

  5. Java学习笔记（03）

    一.回顾运算符: 一．控制语句 1.1 顺序结构 (最常见的) 特点:代码从上往下依次执行

  6. Entity Framework Core 1.1 Preview 1 简介

    实体框架核心(EF Core)是Entity Framework的一个轻量级,可扩展和跨平台版本. 10月25日,Entity Framework Core 1.1 Preview 1发布了. 升级到 ...

  7. KnockoutJS 3.X API 第六章 组件(2) 组件注册

    要使Knockout能够加载和实例化组件,必须使用ko.components.register注册它们,从而提供如此处所述的配置. 注意:作为替代,可以实现一个自定义组件加载器(自定义加载器下一节介绍 ...

  8. Azure Service Febric 笔记：Web API应用

    1.什么是Service Febric 贴一段微软官方的介绍 Service Fabric 是一种分布式系统平台,可让你轻松打包.部署和管理可缩放.可靠的微服务.Service Fabric 还解决了 ...

  9. jQuery第二篇 （帅哥）

    1.1 jQuery操作DOM jQuery课程的目标:学会使用jQuery设计常见效果 选择器 基本选择器:#id ..class .element.* . 层级选择器: 空格.>.+.~ 基 ...

  10. LINQ系列：Linq to Object分区操作符

    分区是指将一个单一的输入序列划分成两个或多个部分或序列,同时不会对输入元素重排序,返回一个新形成的部分.LINQ分割操作符包括Skip.SkipWhile.Take和TakeWhile. 1. Ski ...