由于本人是菜鸟对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等响应事件，当文档中没有内容时是不会有效果的，所以必须监听。
来源：https://www.cnblogs.com/sun-sjmeng/archive/2012/05/24/2517291.html