jQuery css3鼠标悬停图片显示遮罩层动画特效
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鼠标悬停图片显示遮罩层动画特效的更多相关文章
- CSS3鼠标悬停图片上浮显示描述代码
效果:http://hovertree.com/texiao/css3/20/ 效果图: 代码如下: <!doctype html> <html lang="zh" ...
- 简单的CSS3鼠标滑过图片标题和遮罩层动画特效
此文转自:http://www.cnblogs.com/w2bc/p/5735300.html,仅供本人学习参考,版权归原作者所有! 这是一款使用CSS3制作的简单的鼠标滑过图片标题和遮罩层动画特 ...
- HTML5+CSS3鼠标悬停图片特效
点击预览效果 下载该特效: HTML5+CSS3鼠标悬停图片特效.zip 特效说明: 一款HTML5+CSS3鼠标悬停图片事件网页特效,集合了最流行鼠标悬停图片文字.图片动画移动 ...
- 15款css3鼠标悬停图片动画过渡特效
分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- css3鼠标悬停图片边框线条动画特效
css3鼠标经过内容区时,边框线条特效效果制作. html: <div class="strength grWidth hidden"> <div class ...
- 纯css3鼠标经过图片显示描述特效
http://***/Article/5582 今天给大家带来的是用css3技术实现鼠标经过图片,显示图片描述的动画效果.鼠标经过图片时,图片动画缩小并渐变显示描述.我们一起看看效果图: 在线预览 ...
- CSS3鼠标悬停图片动画
鼠标放到图片上后: demo地址:demo div: <div class="wai"> <a href="#"> <div cl ...
- 鼠标hover图片时遮罩层匀速上升显示内容top、定位
1.html <div class="div1"> <div class="div11"> <p >Dolor nu ...
- css3鼠标悬停图片渐显飞入效果
body程序: <div id="bei"> <div id="img"><img src="xianzi.png&qu ...
随机推荐
- 动态sql
目录 1.给动态语句传值(USING 子句) 2.从动态语句检索值(INTO子句) 3.动态调用存过 4.将返回值传递到PL/SQL记录类型;同样也可用%rowtype变量 5.传递并检索值.INTO ...
- gulp es7配置文件
http://sanwen.net/a/ybsfcoo.html /** * Created by udi on 2016/11/24. */ var gulp = require('gulp'); ...
- Asp.Net MVC 分页、检索、排序整体实现
很多时候需要这样的功能,对表格进行分页.排序和检索.这个有很多实现的方式,有现成的表格控件.用前端的mvvm,用户控件.但很多时候看着很漂亮的东西你想进一步控制的时候却不那么如意.这里自己实现一次,功 ...
- （C#）使用NPOI导出Excel
在做业务型的软件时,经常需要将某些数据导出,本文介绍了在Winform或Asp.net中使用NPOI(POI 项目的 .NET 版本)来操作Excel文件,而无需安装Office. 首先,需要获取NP ...
- 初试ASP.NET Web API/MVC API（附Demo）
写在前面 HTTP RESTful 创建Web API 调用Web API 运行截图及Demo下载 ASP.NET Web API是一个框架,可以很容易构建达成了广泛的HTTP服务客户端,包括浏览 ...
- 为什么可以说Java语言是准动态语言？
什么是动态语言? 动态语言,是指程序在运行时可以改变其结构:新的函数可以被引进,已有的函数可以被删除等在结构上的变化.比如JavaScript便是一个典型的动态语言. 除此之外如Ruby.Python ...
- php语言
<?php//单行注释/*多行注释*///弱类型语言//var a=10;//php定义变量/*$a =10; //变量名前加$$b="hello";var_dump($a) ...
- 浅谈HTML5单页面架构（一）——requirejs + angular + angular-route
心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验 ...
- 判断手机端用户打开页面时是android还是ios,并将判断结果通过ajax返回给url接口，传递回去
首先判断页面是android还是ios,然后利用ajax将结果通过接口url返回回去,记录到log日志中,以统计android和ios用户访问该页面的数量(数据统计) <script type= ...
- Security2:Create User
User 用于访问DB Users based on logins in master (This is the most common type of user.) User based on a ...