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 Core如何获取客户端IP地址

    在ASP.NET中,使用负载均衡时,可以通过ServerVariables获取客户端的IP地址. var ip = request.ServerVariables["HTTP_X_FORWA ...

  2. CSS3 制作一个边框向周围散开的按钮效果

    我们将要达到的是如下的效果(若效果未出现请刷新): 分析 主要还是运用CSS3的transition, animation, transform还有渐变背景等特性. 由于按钮在鼠标进入时有不同的样式, ...

  3. 2013 duilib入门简明教程 -- 部分bug (11)

     一.WindowImplBase的bug     在第8个教程[2013 duilib入门简明教程 -- 完整的自绘标题栏(8)]中,可以发现窗口最大化之后有两个问题,     1.最大化按钮的样式 ...

  4. Rabbitmq安装与配置

    install: 1.安装Erlang: $yum -y install erlang 2.安装rabbitmq-server: $rpm --import https://www.rabbitmq. ...

  5. Distribution1：Distribution Reader

    在transactional replication中,在publication中执行了一个更新,例如:update table set col=? Where ?,如果table中含有大量的数据行, ...

  6. VS2015签名丢失解决办法

    废话少说,直接上问题和解决办法, 问题:VS2015安装后运行程序会发现这个问题 解决办法 1.下载SignTool.exe签名文件 2.将签名文件放入 C:\Program Files (x86)\ ...

  7. OpenCASCADE Rational Bezier Curves

    OpenCASCADE Rational Bezier Curves eryar@163.com Abstract. Although polynomials offer many advantage ...

  8. MVC4做网站六后台管理:6.2网站信息设置

    用来实现网站标题.名称.关键字.描述.版权等信息的设置. 模型字段: 网站的设置信息前后台都要用到,所以要把模型方式Ninesky/Models文件夹中,代码如下: ///////////////// ...

  9. ASP.NET WebAPi之断点续传下载（中）

    前言 前情回顾:上一篇我们遗留了两个问题,一个是未完全实现断点续传,另外则是在响应时是返回StreamContent还是PushStreamContent呢?这一节我们重点来解决这两个问题,同时就在此 ...

  10. 给Easyui　combobox设定默认值

          今天做到那个北理工二期的项目,里面刚好有几个dialog需要弄一个默认值,一般是选择启用与否,但是,为了方便用户,最好有一个默认值,所以,增加一个默认值的属性.代码入下: JS代码:   ...