鼠标悬浮图片出现透明层效果
分类：实例代码
本章节分享一段代码实例，它实现了鼠标悬浮在图片上出现透明图层效果。
并且图层的出现方位和鼠标移入的方位有关联，代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
* {
margin: 0;
padding: 0;
}
a, img {
border: 0;
}
ul, li {
list-style: none;
}
body {
background: #eee;
}
.jq22 {
width: 490px;
margin: 30px auto;
}
.box {
float: left;
width: 100px;
height: 100px;
border: 1px solid white;
background: #EEE;
margin: 10px;
position: relative;
display: inline;
}
.boxBor {
position: absolute;
border: 1px solid white;
z-index: 4;
background: #fff;
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.77));
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.77));
background: -o-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.77));
width: 100px;
height: 100px;
left:0px;
top:0px;
opacity: 0;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function () {
$('.box').bind('mouseover', function () {
var oPosition = $(this).position();
$(".boxBor").stop(false, false).animate({
opacity: 0.8,
left: oPosition.left + 10,
top: oPosition.top + 10,
}, 1000)
});
})
</script>
</head>
<body>
<div class="boxBor" deta-switch="true"></div>
<div class="jq22">
<div class="box"><img width="100" height="100" src="demo/jQuery/ant/1.jpg" alt=""></div>
<div class="box"><img width="100" height="100" src="demo/jQuery/ant/2.jpg" alt=""></div>
<div class="box"><img width="100" height="100" src="demo/jQuery/ant/3.jpg" alt=""></div>
<div class="box"><img width="100" height="100" src="demo/jQuery/ant/4.jpg" alt=""></div>
<div class="box"><img width="100" height="100" src="demo/jQuery/ant/5.jpg" alt=""></div>
<div class="box"><img width="100" height="100" src="demo/jQuery/ant/6.jpg" alt=""></div>
<div class="box"><img width="100" height="100" src="demo/jQuery/ant/7.jpg" alt=""></div>
<div class="box"><img width="100" height="100" src="demo/jQuery/ant/1.jpg" alt=""></div>
<div class="box"><img width="100" height="100" src="demo/jQuery/ant/2.jpg" alt=""></div>
<div class="box"><img width="100" height="100" src="demo/jQuery/ant/3.jpg" alt=""></div>
<div class="box"><img width="100" height="100" src="demo/jQuery/ant/4.jpg" alt=""></div>
<div class="box"><img width="100" height="100" src="demo/jQuery/ant/5.jpg" alt=""></div>
</div>
</body>
</html>
上面的代码实现了我们的要求，下面就介绍一下它的实现过程。
一.代码注释:
（1）.$(function () {})，当文档结构完全加载完毕再去执行函数中的代码。
（2）.$('.box').bind('mouseover', function () {})，为class属性值为box的元素注册mouseover事件处理函数。
（3）.var oPosition = $(this).position()，获取当前元素的坐标。
（4）.$(".boxBor").stop(false, false).animate({ opacity: 0.8,
left: oPosition.left + 10,
top: oPosition.top + 10,
}, 250)，动画效果。
left: oPosition.left + 10和top: oPosition.top + 10为了实现半透明层覆盖于图片之上，加10是因为box元素有10px的外边距。
二.相关阅读:
（1）.position()可以参阅jquery position()一章节。
（2）.stop()可以参阅jQuery stop()一章节。
（3）.animate()可以参阅jQuery animate()一章节。
