描述：获取鼠标在页面中某个盒子的位置。当用户鼠标放在页面中的任意一个盒子的时候，可以获取鼠标在该盒子中的具体位置，鼠标离开之后显示为0；
原理：鼠标的位置减去盒子的位置。
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标在盒子中的位置</title>
</head>
<style>
.box{
width: 300px;
height: 300px;
padding-top: 100px;
background: #91B81D;
margin: 100px;
text-align: center;
font: 20px/30px "华文宋体";
cursor: pointer;
}
</style>
<body>
<div class="box">
鼠标在盒子中的X坐标为：0px;<br>
鼠标在盒子中的Y坐标为：0px;
</div>
</body>
</html>
<script>
var box = document.getElementsByClassName("box")[0];
box.onmousemove = function (event) {
event = event || window.event;
var pagex = event.pageX || scroll().left+event.clientX;
var pagey = event.pageY || scroll().top+event.clientY;
var targetx = pagex-box.offsetLeft;
var targety = pagey-box.offsetTop;
this.innerHTML = "鼠标在盒子中的X坐标为："+targetx+"px;<br>鼠标在盒子中的Y坐标为："+targety+"px;"
}
box.onmouseout = function () {
this.innerHTML = "鼠标在盒子中的X坐标为："+0+"px;<br>鼠标在盒子中的Y坐标为："+0+"px;"
}
function scroll(){
return {
"top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
"left": window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
}
}
</script>
