<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ 200px; height: 200px; background: red; position: absolute; left: 0; } </style> <script> window.onload = function(){ //这样会出现一个问题 当body高度大于可是区出现滚动条的时候 鼠标oEvent.clientY是可视区的高度 而块是按body定位的 //出现滚动条后 div和鼠标位置就有了问题 怎么解决呢?clientY加上scrollTop就可以解决 document.onmousemove = function(ev){ var oEvent = ev|| event; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var oDiv = document.getElementById("div1"); oDiv.style.left = oEvent.clientX + "px"; oDiv.style.top = oEvent.clientY +scrollTop+ "px"; } } </script> </head> <body style="height: 2000px;"> <div id="div1"></div> </body> </html>
函数的封装和如何使用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ 200px; height: 200px; background: red; position: absolute; left: 0; } </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}; } window.onload = function(){ 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;"> <div id="div1"></div> </body> </html>