鼠标悬浮弹出鼠标跟随层代码实例

快乐打工仔 分类:实例代码

本章节分享一段代码实例,它实现了鼠标悬浮能够弹出一个层,并且此层能够跟随鼠标的移动。

代码实例如下:

<!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事件一章节。

鼠标悬浮弹出鼠标跟随层代码实例

回复

我来回复
  • 暂无回复内容