鼠标悬浮弹出鼠标跟随层代码实例
本章节分享一段代码实例，它实现了鼠标悬浮能够弹出一个层，并且此层能够跟随鼠标的移动。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
#preview{
width:300px;
height:200px;
border:5px solid darkgoldenrod;
background:#ccc;
color:#fff;
padding:5px;
display:none;
position:absolute;
}
#hover{
width:300px;
height:200px;
background:#ccc;
text-align:center;
line-height:200px;
color:black;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
xOffset = 10;
yOffset = 10;
$("#hover").hover(function(e){
$("#preview")
.css('display', 'block')
.css("top",(e.pageY + xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("slow");
}, function(){
$("#preview").fadeOut("fast");
});
$("#hover").mousemove(function(e){
$("#preview")
.css("top",(e.pageY + xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
});
</script>
</head>
<body>
<div id="hover">鼠标放在这里</div>
<div id='preview'>jquery实现跟随鼠标移动的弹层</div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.$(document).ready(function(){})，当文档结构完全加载完毕再去执行函数中的代码。
（2）.xOffset = 10和yOffset = 10，分别声明变量并赋值为10，它规定了弹出层距离鼠标指针水平和垂直距离。
（3）.$("#hover").hover(function(e){},function(e){})，为id属性值为hover的元素注册hover事件处理函数，其实就是规定鼠标悬浮和鼠标离开执行的函数。
（4）.css('display', 'block')，显示弹出层。
（5）.css("top",(e.pageY + yOffset) + "px")，设置弹出层的top属性值为鼠标指针在文档中的垂直坐标加上yOffset。
（6）.css("left",(e.pageX + xOffset) + "px")，和上面同样的道理，不过是设置水平坐标。
（7）.fadeIn("slow")，以动画方式显示元素。
（8）.$("#preview").fadeOut("fast")，鼠标离开的时候弹出层以动画方式隐藏。
（9）.$("#hover").mousemove(function(e){
$("#preview")
.css("top",(e.pageY + xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
})，设置当鼠标指针移动时候，实现弹出层能够跟随效果。
二.相关阅读:
（1）.hover()可以参阅jQuery hover 事件一章节。
（2）.css()可以参阅jQuery css()方法一章节。
（3）.e.pageY可以参阅jQuery event.pageY一章节。
（4）.fadeIn()可以参阅jQuery fadeIn()一章节。
（5）.fadeOut()可以参阅jQuery fadeOut()一章节。
（6）.mousemove事件可以参阅jQuery mousemove事件一章节。