这个方法同样是使用下x,y的坐标 坐标的使用方法的解释可以参考我发布的上一篇 关于坐标的使用点击进入
可以随着鼠标移动
想要成功应用的话必须给盒子加一个定位
<script type="text/javascript"> window.onload = function(){ var box = document.getElementById("box"); document.onmousemove = function(event){ event = event || window.event; var left = event.clientX;//获取可见窗口的 鼠标 坐标 var top = event.clientY; box.style.left = left + sl + "px"; box.style.top = top + st + "px"; } } </script>此方法有一些局限 只能获取当前窗口的坐标，如果网页中过长有滚动条是这个方法就会错误 因为这个 clientX属性 获取可见窗口的 鼠标的坐标 因此可以找一个获取 整个页面坐标的属性
pageX 和 pageY 可以获取整个页面的属性
<script type="text/javascript"> window.onload = function(){ var box = document.getElementById("box"); document.onmousemove = function(event){ event = event || window.event; var left = event.pageX;//获取整个页面的鼠标的坐标 var top = event.pageY; box.style.top = top + "px"; box.style.left = left + "px"; } }这个方法虽然但IE8中依然无法使用
下面为整体预览图
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box{ width: 100px; height: 100px; background-color: #00FFFF; position: absolute; } </style> <script type="text/javascript"> window.onload = function(){ var box = document.getElementById("box"); document.onmousemove = function(event){ event = event || window.event; // var left = event.clientX;//获取可见窗口的 鼠标 坐标 // var top = event.clientY; var left = event.pageX;//整个页面但是ie8不支持 var top = event.pageY; box.style.left = left + "px"; box.style.top = top + "px"; } } </script> </head> <body style="height: 1000px;width: 3000px;"> <div id="box"></div> </body> </html>