1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <script type="text/javascript">
8 window.onload=function()
9 {
10 /*
11 div可以跟随鼠标移动
12 */
13 var box1=document.getElementById("box1");
14 document.onmousemove=function(event){
15 event=event||window.event;
16 /*
17 设置div的偏移量 设置偏移量只对开启定位的元素起作用
18 获取到的x y是一个数值
19 clientX,clientY用于获取鼠标在当前可见窗口的坐标
20 div的偏移量是相对于整个页面的
21
22 pageX,pageY可以获取鼠标相对于当前页面的坐标
23 在IE8中不支持，所以如果需要兼容IE8则不使用
24
25 当页面的长度大于窗口的最大长度，
26 chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
27 火狐等浏览器则认为浏览器的滚动条是HTML的
28 */
29 //var st=document.body.scrollTop;
30 var st=document.body.scrollTop||document.documentElement.scrollTop;
31 var sl=document.body.scrollLeft||document.documentElement.scrollLeft;
32 //var x=event.pageX;
33 //var y=event.pageY;
34 var x=event.clientX;
35 var y=event.clientY;
36 box1.style.left=x+sl+"px";
37 box1.style.top=y+st+"px";
38 };
39 };
40 </script>
41 <style type="text/css">
42 #box1{
43 width:100px;
44 height:100px;
45 background-color:red;
46 /* 开启box1的定位 */
47 position:absolute;
48 }
49 </style>
50 <body style="height:1000px width:1000px">
51 <div id="box1"></div>
52 </body>
53 </html>
