css代码 :
<style type="text/css"> *{ margin: 0; padding: 0; } div{ width: 100px; height: 100px; background: red; position: absolute; } </style>html代码 :
<body style="height: 3000px;"> <!--把光标在可视区域的坐标位置赋值给div--> <div></div> </body>js代码 :
<script type="text/javascript"> var odiv=document.querySelector('div'); window.onmousemove=function(e){ var h=document.documentElement.scrollTop||document.body.scrollTop; var e=e||window.event; var l=e.clientX-odiv.offsetWidth/2; //l 是div在可视区域X轴上距左的距离 var t=e.clientY-odiv.offsetHeight/2; //t 是div在可视区域Y轴上距上的距离 console.log(l+','+t) if(l<0){ l=0 } if(t<0){ t=0; } //document.documentElement.clientWidth 是可视区域的宽 //odiv.offsetWidth是div元素自身的宽 //如果是div在可视区域X轴上距左的距离>可视区域的宽减去div元素自身的宽 //就让div在可视区域X轴上距左的距离=可视区域的宽减去div元素自身的宽 if(l>document.documentElement.clientWidth-odiv.offsetWidth){ l=document.documentElement.clientWidth-odiv.offsetWidth; } if(t>document.documentElement.clientHeight-odiv.offsetHeight){ t=document.documentElement.clientHeight-odiv.offsetHeight; } odiv.style.left=l+'px'; odiv.style.top=t+'px'; } </script>