案例：圖片跟著滑鼠飛的最終版本 換了個好看的糖果照片，想給博客首頁加上，但是加上後，應該是overwrite原來的html，所以光有滑鼠跟著飛的效果，原來的功能都不能用了 放入common.js <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
案例：圖片跟著滑鼠飛的最終版本
換了個好看的糖果照片，想給博客首頁加上，但是加上後，應該是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>
