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>