jQuery css3鼠标悬停图片显示遮罩层动画特效

全栈程序员-站长 • 2021年12月22日上午9:00 • 未分类 • 阅读 44

大家好，又见面了，我是全栈君，今天给大家准备了Idea注册码。

此处内容已经被作者隐藏，请输入验证码查看内容

请关注本站微信公众号，回复“验证码”，获取验证码。在微信里搜索“全栈程序员社区”或者“www_javaforall_cn”或者微信扫描右侧二维码都可以关注本站微信公众号。

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>