鼠标挂件（gif图跟随鼠标移动）
程序员文章站
2022-06-28 19:17:01
让下面这张翅膀图片跟随鼠标移动，怎么做呢？其实就是利用到 事件参数对象 e 或者说window.event(IE8不支持e)，来获取鼠标的位置，然后把位置赋值给图片的位置就好了。很简单！
让下面这张翅膀图片跟随鼠标移动，怎么做呢？
其实就是利用到 事件参数对象 e 或者说window.event(IE8不支持e)，来获取鼠标的位置，然后把位置赋值给图片的位置就好了。很简单！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>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.onmousemove = 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={
//window.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.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0;
},
//页面向上卷曲出去的纵坐标
getScrollTop:function () {
return window.pageYOffset||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.onmousemove=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
上一篇： 修改通达oa数据库root密码
下一篇： css3 calc()属性介绍