div跟随鼠标移动 · 前端

![](https://img.kancloud.cn/d5/10/d51015a14f4d3278a1a7efcc4e5513f1_875x512.png) 超出范围时，鼠标相对视口移动位置+滚动条滚动的距离详情参看获取宽度章节 ``` <body style="width: 1000px;height: 1000px;"> <div id="info" style="width: 100px;height:100px;background-color: aquamarine;border:5px solid darkred; position: absolute;"> </div> <script type="text/javascript"> window.onload=function(){ var info=document.getElementById("info"); document.onmousemove=function(event){ //IE8及以下事件响应函数被触发时不会传递event对象，而是作为window的属性保存 event=event||window.event; var X=event.clientX; var Y=event.clientY; /* 火狐等浏览器认为滚动条是html的，chorme浏览器认为滚动条时body的 */ var st=document.body.scrollTop||document.documentElement.scrollTop;; var sl=document.body.scrollLeft||document.documentElement.scrollLeft;; info.style.left=X+sl+"px"; info.style.top=Y+st+"px"; info.innerHTML="x:"+X+"    y:"+Y; } } </script> </body> ```