<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style media="screen">
.box {
width: 300px;
height: 200px;
padding-top: 100px;
margin: 100px;
font: 18px/1.5 "simsun";
background-color: lemonchiffon;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box"></div>
<script src="animate.js" charset="utf-8"></script>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
div.onmousemove = function(event){
event = event || window.event;
var pagex = event.pageX || scroll().left + event.clientX;
var pagey = event.pageY || scroll().top + event.clientY;
var divx = div.offsetLeft;
var divy = div.offsetTop;
var targetx = pagex - divx;
var targety = pagey - divy;
this.innerHTML = "鼠标在盒子中的X坐标：" + targetx + "px;<br />" + "鼠标在盒子中的Y坐标：" + targety + "px;";
}
</script>
</body>
</html>