js实现弹出层鼠标跟随效果

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

本章节分享一段代码实例,它使用原生javascript实现了弹出层鼠标跟随效果。

代码实例如下:

<!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 type="text/javascript">
window.onload=function(){
  var xOffset = 10;
  var yOffset = 10;
  var hover=document.getElementById("hover");
  var preview=document.getElementById("preview");
  hover.onmouseover=function(ev){
    var ev=window.event||ev;
    var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
    preview.style.display="block";
    preview.style.top=((ev.pageY?ev.pageY:ev.clientY + scrollY)+yOffset)+"px";
    preview.style.left=((ev.pageX?ev.pageX:ev.clientX + scrollX)+xOffset)+"px";
  }
  hover.onmouseout=function(ev){
    preview.style.display="none";
  }
  hover.onmousemove=function(){
    var ev=window.event||ev;
    var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
    preview.style.top=((ev.pageY?ev.pageY:ev.clientY + scrollY)+yOffset)+"px";
    preview.style.left=((ev.pageX?ev.pageX:ev.clientX + scrollX)+xOffset)+"px";
  }
}
</script>
</head>
<body>
<div id="hover">鼠标放在这里</div>
<div id='preview'>jquery实现跟随鼠标移动的弹层</div>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).window.onload=function(){},当文档内容完全加载完毕再去执行函数中的代码。

(2).var xOffset = 10,用来规定弹出层距离鼠标指针的水平距离。

(3).var yOffset = 10,用来规定弹出层距离鼠标指针的垂直距离。

(4).var hover=document.getElementById("hover"),获取id属性值为hover的元素对象。(5).var preview=document.getElementById("preview"),获取id属性值为preview的元素对象。

(6).hover.onmouseover=function(ev){},注册onmouseover事件处理函数,参数ev是事件对象。

(7).var ev=window.event||ev,兼容所有浏览器的事件对象兼容。

(8).var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft,获取网页向上滚动的尺寸。

(9).var scrollY = document.documentElement.scrollTop || document.body.scrollTop,获取网页向左滚动的尺寸。

(10).preview.style.display="block",弹出层显示。

(11).preview.style.top=((ev.pageY?ev.pageY:ev.clientY + scrollY)+yOffset)+"px",设置弹出层的top属性值。

(12).preview.style.left=((ev.pageX?ev.pageX:ev.clientX + scrollX)+xOffset)+"px",设置弹出层的left属性值。

(13).hover.onmouseout=function(ev){

  preview.style.display="none";

},当鼠标鼠标离开的时候,弹出层消失。

二.相关阅读:

(1).var ev=window.event||ev可以参阅var ev=window.event||ev的作用是什么一章节。

(2).document.documentElement.scrollLeft || document.body.scrollLeft可以参阅document.documentElement.scrollTop浏览器兼容一章节。

(4).clientY和clientX可以参阅javascript clientX一章节。

(5).onmouseout事件可以参阅javascript mouseout事件一章节。

(6).onmousemove事件可以参阅javascript mousemove事件一章节。

回复

我来回复
  • 暂无回复内容