div跟随鼠标移动 

 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>

 

posted @ 2019-07-28 11:22  zuiaimiusi  阅读(108)  评论(0)    收藏  举报