封装鼠标指针定位是一件很有意义的事情，这样在日常开发中就不需要再为鼠标指针定位问题而犯愁了。
设计思路：能够根据传递的具体对象，以及相对鼠标指针的偏移值，即命令该对象能够跟随鼠标移动。
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>
时间： 2024-10-09 17:40:49