小把戏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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(){
// alert(1)
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="前端大哥老马">
100X100</div>
<div class="box2" txt-int="我是小弟小张">200X200</div>
<div class="box3" txt-int="我是小弟小任">400X300</div>
</div>
</body>
</html>
