jQuery悬浮遮罩显示图片或文字效果jquery
一直在寻找一款能够实现鼠标悬浮遮罩的效果，找了好久硬是没有找到合适的，好不容易找到一个，又实际需求不一样，必须要自己修改。如下是修改后的两个效果。一个是鼠标悬浮后从下往上遮罩，一个是在当前图片上逐渐显...
一直在寻找一款能够实现鼠标悬浮遮罩的效果，找了好久硬是没有找到合适的，好不容易找到一个，又实际需求不一样，必须要自己修改。如下是修改后的两个效果。一个是鼠标悬浮后从下往上遮罩，一个是在当前图片上逐渐显示。
1 从下往上遮罩
代码如下，为方便测试，将一下代买直接复制成HTML文件就可以看到效果了：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery遮罩显示图片文字效果</title>
<script type="text/javascript" src="/uploads/image/20170830//20170830151114_801720.png" width="196" height="126"/>
<div class="box">
<img src="/uploads/image/20170830//20170830151114_801721.png" width="196" height="126"/>
</div>
</span>
<span class="light">
<img src="/uploads/image/20170830//20170830151114_801722.png" width="196" height="126"/>
<div class="box">
<h3>标题</h3>
<p>介绍...</p>
<a href="http://www.awaimai.com/">查看详细</a>
</div>
</span>
</body>
</html>
2 渐渐显示遮罩
逐渐显示遮罩的方式代码更为简单，如下，不需要JQuery获取容器的高度，同样复制保存成html代码可以预览到效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery遮罩显示图片文字效果</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
a,img{border:0;}
body{color:#898989;font:12px/180% Arial;}
a{color:#898989;text-decoration:none}
a:hover{cursor:pointer;color:#9f8054;}
/* 容器样式 */
.light{float:left;position:relative;overflow:hidden;width:196px;height:126px;float:left;margin-right:3px;display:inline;}
/* 替换元素样式 */
.box{ width:100%; height:100%; background:#020000; position:absolute; left:0; top: 0;
line-height:18px; color:#e69714; filter:alpha(Opacity=0); -moz-opacity:0; opacity: 0; text-align:center; cursor:pointer;}
</style>
<script type="text/javascript">
$(function(){
$('.light').hover(
// 鼠标在容器上时，替换元素移动容器上，透明度80%
function(){
$(this).children('.box').stop(true, true).delay(0).animate({opacity:0.8}, 300);
// 鼠标移出后，淡出
},function(){
$(this).children('.box').stop(true, true).animate({opacity:0}, 300);
})
})
</script>
</head>
<body>
<span class="light">
<img src="/uploads/image/20170830//20170830151114_801722.png" width="196" height="126"/>
<div class="box">
<img src="/uploads/image/20170830//20170830151114_801721.png" width="196" height="126"/>
</div>
</span>
<span class="light">
<img src="/uploads/image/20170830//20170830151114_801722.png" width="196" height="126"/>
<div class="box">
<h3>标题</h3>
<p>介绍...</p>
<a href="http://www.awaimai.com/">查看详细</a>
</div>
</span>
</body>
</html>
1 从下往上遮罩
代码如下，为方便测试，将一下代买直接复制成HTML文件就可以看到效果了：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery遮罩显示图片文字效果</title>
<script type="text/javascript" src="/uploads/image/20170830//20170830151114_801720.png" width="196" height="126"/>
<div class="box">
<img src="/uploads/image/20170830//20170830151114_801721.png" width="196" height="126"/>
</div>
</span>
<span class="light">
<img src="/uploads/image/20170830//20170830151114_801722.png" width="196" height="126"/>
<div class="box">
<h3>标题</h3>
<p>介绍...</p>
<a href="http://www.awaimai.com/">查看详细</a>
</div>
</span>
</body>
</html>
2 渐渐显示遮罩
逐渐显示遮罩的方式代码更为简单，如下，不需要JQuery获取容器的高度，同样复制保存成html代码可以预览到效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery遮罩显示图片文字效果</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
a,img{border:0;}
body{color:#898989;font:12px/180% Arial;}
a{color:#898989;text-decoration:none}
a:hover{cursor:pointer;color:#9f8054;}
/* 容器样式 */
.light{float:left;position:relative;overflow:hidden;width:196px;height:126px;float:left;margin-right:3px;display:inline;}
/* 替换元素样式 */
.box{ width:100%; height:100%; background:#020000; position:absolute; left:0; top: 0;
line-height:18px; color:#e69714; filter:alpha(Opacity=0); -moz-opacity:0; opacity: 0; text-align:center; cursor:pointer;}
</style>
<script type="text/javascript">
$(function(){
$('.light').hover(
// 鼠标在容器上时，替换元素移动容器上，透明度80%
function(){
$(this).children('.box').stop(true, true).delay(0).animate({opacity:0.8}, 300);
// 鼠标移出后，淡出
},function(){
$(this).children('.box').stop(true, true).animate({opacity:0}, 300);
})
})
</script>
</head>
<body>
<span class="light">
<img src="/uploads/image/20170830//20170830151114_801722.png" width="196" height="126"/>
<div class="box">
<img src="/uploads/image/20170830//20170830151114_801721.png" width="196" height="126"/>
</div>
</span>
<span class="light">
<img src="/uploads/image/20170830//20170830151114_801722.png" width="196" height="126"/>
<div class="box">
<h3>标题</h3>
<p>介绍...</p>
<a href="http://www.awaimai.com/">查看详细</a>
</div>
</span>
</body>
</html>
下一篇：plupload多按钮上传
最新评论
热门推荐
我要评论