标签：
1.onmousemove可以让div随着鼠标的移动的变化而变化。
这里面有一个小问题就是不知道为什么必须得把div设置为absolute，否则就没有效果。
如果将body的高度变成2000px，这个时候就会出现一些问题。当滚动鼠标的时候，因为clientX和clientY是可视窗口下的距离，而left值是相对于body来说的。所以一般用client的时候都是要和scrollTop这些一起用的。
scrollTop是要自己获取的，他是由两部分组成。我之前的错误就是以为scrollTop是自己获取的，直接用的oEvent.scrollTop
在用clientxy的时候一定要用到scrollTop这些。不然很容易出现这些问题。
2.如果每次用clientX，clientY的时候都要加上scrollTop这些会非常麻烦，所以可以直接把它封装成一个函数，把最后的结果用一个json数组的形式返回出来。这样的话以后要用的时候就可以直接调用它。我在封装的时候一个地方加了‘px’，一个地方没有加所以在后面用的时候出来问题。还是统一起来好。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div{ height: 300px; width: 300px; background: red; position: absolute; } </style> <script> function getPos (ev) { var scrollTop = document.documentElement.srollTop||document.body.scrollTop; var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft; return{x:ev.clientX+scrollLeft+‘px‘,y:ev.clientY+scrollTop} } document.onmousemove = function (ev){ var oDiv = document.getElementsByTagName(‘div‘)[0]; var oEvent = ev||event; // var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; oDiv.style.left = getPos(oEvent).x; oDiv.style.top = getPos(oEvent).y+‘px‘; }; </script> </head> <body style="height: 2000px;"> <div></div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/zhuni/p/4783729.html
