鼠标悬浮遮罩层动画方式滑动切换效果
分享一段代码实例，它实现了鼠标悬浮，元素出现遮罩的功能。
遮罩层能够自适应大小，并且切换具有滑动效果。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 100px;
height: 100px;
border: 1px solid #000;
float: left;
position: relative;
}
.box2 {
width: 200px;
height: 200px;
border: 1px solid #000;
float: left;
margin: 0 20px;
position: relative;
}
.box3 {
width: 400px;
height: 300px;
border: 1px solid #000;
float: left;
position: relative;
}
.mask {
background: red;
opacity: .5;
position: absolute;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
$(function() {
var aDiv = $('#box').children();
aDiv.each(function() {
$(this).mouseover(function() {
var wi = $(this).width();
var ht = $(this).height();
var op = $(this).position();
var txt = $(this).attr('txt-int');
var mar = $(this).css('marginLeft');
$('.mask').stop().animate({
'width': wi,
'height': ht,
'left': op.left + parseInt(mar),
'top': op.top,
'lineHeight': ht + 'px'
}, 300).find('a').html(txt).css({
'width': wi,
'height': ht,
'display': 'block',
'textAlign': 'center'
})
})
})
})
</script>
</head>
<body>
<div class='mask'><a href="#"></a></div>
<div id="box">
<div class="box1" txt-int="前端教程网一"></div>
<div class="box2" txt-int="前端教程网二"></div>
<div class="box3" txt-int="前端教程网三"></div>
</div>
</body>
</html>
上面的代码实现了鼠标悬浮出现遮罩层效果，下面介绍一下它的实现过程。
一.代码注释:
（1）.$(function() {})，当文档结构完全加载完毕再去执行函数中的代码。
（2）.var aDiv = $('#box').children()，获取box元素下的说有div子元素。
（3）. aDiv.each(function() {})，遍历每一个div元素。
（4）.$(this).mouseover(function() {})，为每一个div元素注册mouseover事件处理函数。
（5）.var wi = $(this).width()，获取当前div元素的宽度。
（6）.var ht = $(this).height()，获取当前div元素的高度。
（7）.var op = $(this).position()，返回当前div元素相对于文档的偏移量。
（8）.var txt = $(this).attr('txt-int')，获取当前div元素txt-int属性值。
（9）.var mar = $(this).css('marginLeft')，获取元素的margin-left属性值。
（10）.$('.mask').stop().animate({
'width': wi,
'height': ht,
'left': op.left + parseInt(mar),
'top': op.top,
'lineHeight': ht + 'px'
}, 300)，以动画方式设置遮罩层的尺寸和定位。
（11）.find('a').html(txt).css({
'width': wi,
'height': ht,
'display': 'block',
'textAlign': 'center'
})，获取链接a，然后将其文本内容设置为获取的txt值。
并且将链接a设置为块级元素，然后设置它的尺寸。
二.相关阅读:
（1）.children()方法可以参阅jQuery children()一章节。
（2）.each()方法可以参阅jQuery each()一章节。
（3）.mouseover事件可以参阅jQuery mouseover事件一章节。
（4）.position()可以参阅jQuery position()一章节。
（5）.stop()可以参阅jQuery stop()一章节。
（6）.animate()可以参阅jQuery animate()一章节。
（7）.parseInt()可以参阅javascript parseInt()一章节。
（8）.find()可以参阅jQuery find()一章节。
鼠标悬浮遮罩层动画方式滑动切换效果，这样的场景在实际项目中还是用的比较多的，关于鼠标悬浮遮罩层动画方式滑动切换效果就介绍到这了。
鼠标悬浮遮罩层动画方式滑动切换效果属于前端实例代码，有关更多实例代码大家可以查看。