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