javascript元素鼠标跟随效果代码实例详解

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

本章节分享一段代码实例,它实现了元素鼠标跟随效果。

也就是元素会跟随鼠标移动的位置,下面就详细介绍一下它的实现过程。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
body{
  margin:0; 
  padding:0
}
#to_top{
  width:80px;
  height:40px;
  padding:20px;
  font:14px/20px arial;
  text-align:center;
  background:#06c;
  position:absolute;
  cursor:pointer;
  color:#fff
}
</style>
<script>
window.onload = function(){
  var oTop = document.getElementById("to_top");
  document.onmousemove = function(evt){
    var oEvent = evt || window.event;
    var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft;
    var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
    oTop.style.left = oEvent.clientX + scrollleft +10 +"px";
    oTop.style.top = oEvent.clientY + scrolltop + 10 + "px";
  }
}
</script>
</head>
<body>
<a href="pipipi.net">犀牛前端部落</a>
<div id="to_top">pipipi.net</div>
</body>
</html>

上面的代码实现了跟随效果,下面介绍一下它的实现过程。

一.代码注释:

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

(2).var oTop = document.getElementById("to_top"),获取id属性值为to_top的元素对象。

(3).document.onmousemove = function(evt){},为document注册onmousemove事件处理函数。

(4).var oEvent = evt || window.event,实现了事件对象的浏览器兼容。

(5).var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft,获取页面向左滚动的尺寸。

(6).var scrolltop = document.documentElement.scrollTop || document.body.scrollTop,获取页面向上滚动的尺寸。

(7).oTop.style.left = oEvent.clientX + scrollleft +10 +"px",设置元素的left属性值,这个值是鼠标在客户区的坐标加上页面向左滚动的坐标,然后再加10px,这个10px就是鼠标指针和元素的距离。

二.相关阅读:

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

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

(3).scrollLeft可以参阅js scrollLeft一章节。

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

javascript元素鼠标跟随效果代码实例详解

回复

我来回复
  • 暂无回复内容