电脑鼠标一般都是一个小箭头的图标,如果我们想要设置一个图片跟着鼠标走,鼠标移动图片跟着移动该怎么做呢?
效果如下:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片跟着鼠标飞</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 2000px;
}
img {
position: absolute;
}
</style>
</head>
<body>
<img src="./logo.png" alt="" id="im" style="width: 30px;">
<script>
// 图片跟着鼠标飞,可以在任何浏览器中实现
var evt = {
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 (evt) {
return window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0;
},
getScrollTop: function (evt) {
return window.pageXOffset || document.body.scrollTop || document.documentElement.scrollTop || 0;
},
getPageX: function (evt) {
return this.getEvent(evt).pageX ? this.getEvent(evt).pageX : this.getClientX(evt) + this.getScrollLeft(evt);
},
getPageY: function (evt) {
return this.getEvent(evt).pageY ? this.getEvent(evt).pageY : this.getClientY(evt) + this.getScrollTop(evt);
}
};
document.onmousemove = function (e) {
document.getElementById("im").style.left = evt.getPageX(e) + "px";
document.getElementById("im").style.top = evt.getPageY(e) + "px";
};
</script>
</body>
</html>