案例：图片跟着鼠标飞的最终版本
换了个好看的糖果照片，想给博客首页加上，但是加上后，应该是overwrite原来的html，所以光有鼠标跟着飞的效果，原来的功能都不能用了
放入common.js
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>title</title> <style>
img {
position: absolute;
}
</style>
</head> <body>
<img
src="https://images.cnblogs.com/cnblogs_com/jane-panyiyun/1620008/t_191224122527%E5%9C%A3%E8%AF%9E%E7%B3%96%E6%9E%9C.png?a=1577190334776"
alt="" id="im" />
<script src="common.js"></script>
<script>
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";
}; </script>
</body> </html>