让下面这张翅膀图片跟随鼠标移动，怎么做呢？
其实就是利用到 事件参数对象 e 或者说window.event(IE8不支持e)，来获取鼠标的位置，然后把位置赋值给图片的位置就好了。很简单！
<!DOCTYPE ht四表ml> <html lang="en"> <head> <meta chart="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&学历信息查询gt;Document</title> <style> img{ width: 100px; height: 50px; position: absolute; } </style> </head> <body> <img id="img1" src="images/翅膀.gif" alt=""> <script src="common.js"></script> <script> document.onmoumove = function(e){ e=window.event||e; my$("img1").style.left商务英语专业描述 = e.clientX+"px"; my$("img1").style.top = e.clientY+"px"; console.log(e.clientX) } </script> </body> 网站推广员</html>但是随之问题就出来了，由于clientX和clientY表示的是***可视区域***的left和top值，如果网页有滚动条的话，随着滚动条往下，鼠标位置不变，可以看一个bug，就是图片像上飞走，因为鼠标的实际位置变大了，但是可视区域的x和y没有变。这里可以用pageX和pageY代替，但是可气的是，IE8是不支持这个属性的。所以还有一个方法，那就是可视区域的坐标加上向上滚动出去距离就是鼠标当前的目标。
下面是兼容代码
var evt={ //wind小学信息技术教案ow.event和事件参数对象e的兼容 getEvent:function (evt) { return window.event||evt; }, //可视区域的横坐标的兼容代码 getClientX:function (evt) { return this.getEvent(evt).clientX; }, //可视区域的纵坐标的兼容代码 getClientY:function (evt) { return this.getEvent(evt).clientY; }, //页面向左卷曲出去的横坐标 getScrollLeft:function () { return window.pageXOfft||document.body.scrollLeft||document.documentElement.scrollLeft||0; }, //页面向上卷曲出去的纵坐标 getScrollTop:function () { return window.pageYOfft||document.body.scrollTop||document.documentElement.scrollTop||0; }, //相对于页面的横坐标(pageX或者是clientX+scrollLeft) getPageX:function (evt) { return this.getEvent(evt).pageX? this.getEvent(evt).pageX:this.getClientX(evt)+this.getScrollLeft(); }, //相对于页面的纵坐标(pageY或者是clientY+scrollTop) getPageY:function (evt) { return this.getEvent(evt).pageY?this.getEvent(evt).pageY:this.getClientY(evt)+this.getScrollTop(); } }; document.onmoumove=function (e) { my$("im").style.left=evt.getPageX(e)+"px"; my$("im").style.top=evt.getPageY(e)+"px"; };这样就完成啦！
本文地址：https://blog.csdn.net/weixin_41865901/article/details/112507705
本文发布于:2023-04-07 17:26:53，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/4983d567303aa2bb5db6246a97247206.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：鼠标挂件（gif图跟随鼠标移动）.doc
本文 PDF 下载地址：鼠标挂件（gif图跟随鼠标移动）.pdf
| 留言与评论（共有 0 条评论） |
