鼠标跟随

鼠标跟随

鼠标跟随首先就要设置跟随在鼠标上的东东，一般是一个层，在body中插入<div id="tm" style="position=absolute;top=400">Hello world</div> 就建立了一个叫tm的层 . 接下来就要在head中插入一个函数

<script>

function tr_mouse() {

tm.style.top=event.clientY+document.body.scrollTop;

tm.style.left=event.clientX+document.body.scrollLeft;

}

</script>

下面来解释一下:tm就是刚刚定义的层;tm.style.top和tm.style.left就是这个层的左上角离开整个文档的上沿和左沿的距离;event.clientY和event.clientX在后面解释;document.body.scrollTop 和document.body.scrollLeft根据我的理解就是:当前窗口内可见的部分文档的左上角离开整个文档的上沿和左沿的位置,也就是你的滚动条滚动了多少. 　

然后写入<body onmousemove="tr_mouse();">,onmousemove就当在鼠标每次移动时触发的事件，上面的代码就是鼠标每次在文档上移动时执行tr_mouse()函数；下面就要讲event.clientX与event.clientY 这两个属性就是指事件发生的位置(离开可见的部分文档的左沿和上沿的距离) ,现在的触发事件是onmousemove,那么event.clientX与event.clientY就是指鼠标当时在部分文档中的位置.

综合起来看,这些代码,就是每当鼠标从一个位置移到另一个位置时,使

tm层离开整个文档的上沿的距离=鼠标当时离开部分文档上沿的距离+当前窗口内可见的部分文档的左上角离开整个文档的上沿的距离

tm层离开整个文档的左沿的距离=鼠标当时离开部分文档左沿的距离+当前窗口内可见的部分文档的左上角离开整个文档的左沿的距离

这样循环往复,就实现了鼠标跟随.

部分文档也可理解为浏览器的文档窗口