Dom实现div跟随鼠标
由于本人是菜鸟对javascrit理解不深入，如果疏漏请大家多多包涵多多题型。近来看到网页上的地图上有个东西跟着鼠标动，上面显示着X和Y的坐标，通过学习和理解终于自己完成了一个。遗憾的是FF上不兼容，但是还是拿出来请大家多多评论指正。下面请看代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" > 3 <head> 4 <title>无标题页</title> 5 <script type="text/javascript"> 6 function load(){ 7 8 var xPoint=window.event.clientX; 9 var yPoint=window.event.clientY; 10 div2.innerHTML="X="+xPoint+",Y="+yPoint; 11 div2.style.marginLeft=xPoint+"px"; 12 div2.style.marginTop=yPoint+"px"; 13 div1.onmousemove=dOnmousemove; 14 } 15 function dOnmousemove(){ 16 var div=document.getElementById("div1"); 17 var xPoint=window.event.clientX; 18 var yPoint=window.event.clientY; 19 div2.innerHTML="X="+xPoint+",Y="+yPoint; 20 div2.style.marginLeft=xPoint+"px"; 21 div2.style.marginTop=yPoint+"px"; 22 23 24 } 25 document.onmousemove=load; 26 27 28 </script> 29 </head> 30 <body onload="load()"style="background-color:Red"> 31 <div id="div1" style="width:100%;height:100%" > 32 <div id="div2" style=" background-color:Yellow; width:100px;height:20px;">ddd</div> 33 </div> 34 35 36 </body> 37 </html>
思路：
1.确认跟随鼠标的是一个div。
在javascript中在在页面上弹出的大部分都是一个层而不是单独的页面。所以首先定义一个跟随鼠标的层div2。
2.获取X坐标和Y坐标。
由于是跟随鼠标所以必须获取鼠标移动时X的坐标和Y的坐标，所以使用window.event.clientX和window.event.clientY来获取。
3.让X坐标和Y坐标显示在div中。
要让div中显示X的坐标和Y的坐标使用div2.innerHTML="X="+xPoint+",Y="+yPoint;
4.控制div跟随鼠标时的位置。
要控制div跟随鼠标就必须控制div的位置，所以使用div2.style.marginLeft=xPoint+"px";div2.style.marginTop=yPoint+"px";分别将X的坐标和Y的坐标值赋给div2的marginLeft和marginTop。
5.定义onmousemove事件。
onmousemove事件是指在鼠标移动时所触发的事件，使用div1.onmousemove=dOnmousemove；此时的dOnmousemove函数是onmousemove事件的响应函数。
6.监听onmousemove事件。
在最后必须监听onmousemove事件，因为div1层中除了跟随鼠标的div2后没有任何的内容。鼠标的onclick、onload等响应事件，当文档中没有内容时是不会有效果的，所以必须监听。
