樣式跟著鼠標移動而移動，當寬高不限制的時候問題解決方法
阿新 • • 發佈：2018-11-03
idt meta code scroll oct tle || event 效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js 事件event</title> <style> #div1{ width: 50px; height: 50px; background: red; position: absolute; /*這個是關鍵*/ } </style> <script> function getpos(ev){ var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft; return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop} }//效果是樣式跟著鼠標的移動而移動 document.onmousemove=function(ev) { //鼠標移動 var oEvent=ev||event; var oDiv=document.getElementById("div1"); var pos = getpos(oEvent); oDiv.style.left=pos.x+"px"; oDiv.style.top=pos.y+"px"; } </script></head> <body style="height: 2000px;width: 3000px;"> <div id="div1"></div> </body> </html>
樣式跟著鼠標移動而移動，當寬高不限制的時候問題解決方法