这篇文章主要介绍了 js 实现简单鼠标跟随效果的方法, 涉及 javascript 鼠标事件与坐标获取等相关技巧, 非常具有实用价值, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 js 实现简单鼠标跟随效果的方法。分享给大家供大家参考。具体分析如下:
鼠标跟随,顾名思义,就是在鼠标移动的时候,有个动画跟随着鼠标一起移动。
要点一:
- var oEvent = evt || window.event;
这个是为了兼容 ie 和 ff 而写的,在 ie 下 window.event 表示 event 对象,而 ff 下,是给事件函数传一个参数,这个参数就表示事件对象。
要点二:
- document.onmousemove = function(evt)
鼠标跟随是在鼠标移动时发生的事情。
要点三:
- document.documentElement.scrollTop || document.body.scrollTop;
这是为了兼容 chrome 和其它浏览器,滚动条距上边滚动的距离,chrome 用后边那个,其它浏览器用前面那个。
要点四:
- oTop.style.top=oEvent.clientY+scrolltop+10+"px";
当鼠标移动时把鼠标的当前位置赋值给元素的位置值。
oEvent.clientY 即为鼠标的当前 Y 坐标的位置,加 scrolltop 的距离是要在滚动到不是第一屏的时候,鼠标跟随效果依然不改变而写。
代码如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>无标题文档</title>
- <style>
- body{margin:0; padding:0}
- #to_top{
- width:30px;
- 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 style="height:1000px;">
- <a href="#">文字</a>
- <div id="to_top">鼠标跟随</div>
- </body>
- </html>
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: