封装鼠标指针定位是一件很有意义的事情，这样在日常开发中就不需要再为鼠标指针定位问题而犯愁了。
设计思路：能够根据传递的具体对象，以及相对鼠标指针的偏移值，即命令该对象能够跟随鼠标移动。
JS代码：
function getMousePos(o,x,y,event){ //o-->对象;x,y-->相对鼠标指针的偏移距离;event-->事件对象; var posX = 0,posY = 0; //临时变量 var event = event || window.event; //标准化事件对象 if(event.pageX || event.pageY){ //获取鼠标指针的当前坐标值 posX = event.pageX; posY = event.pageY; }else if(event.clientX || event.clientY){ posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft; posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop; }; o.style.position = 'absolute'; //定义当前对象为绝对位置 o.style.left = (posX + x) + 'px'; //用鼠标指针的x轴坐标和传入偏移值设置对象x轴坐标 o.style.top = (posY + y) + 'px'; //用鼠标指针的y轴坐标和传入偏移值设置对象y轴坐标 }
HTML页面：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>通用元素跟随鼠标移动效果</title> <style> #div1{ width: 200px; height: 200px; background-color: red; } </style> <script src="js/mousePos.js"></script> <script> window.onload = function(){ var oDiv1 = document.getElementById('div1'); document.onmousemove = function(event){ getMousePos(oDiv1,10,10,event); } } </script> </head> <body> <div id="div1">我是移动元素</div> </body> </html>