注：本案例主要演示 网页中的几个坐标属性的用法（clientX，clientY，pageX，pageY），如有疑问可去B站观看尚硅谷李立超老师的JS教程（https://www.bilibili.com/video/BV1YW411T7GX?p=112&spm_id_from=pageDriver）。
效果图：
源码及解析：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>练习</title>
<style>
#box1{
height: 100px;
width: 100px;
background-color: aqua;
position: absolute;
}
#bd{
width: 1000px;
height: 1000px;
}
</style>
<script>
window.onload = function(){
var box1 = document.getElementById("box1");
var bd = document.getElementById("bd");
document.onmousemove = function(e){
//去除版本缺陷
/*
在IE8中，响应函数被触发时，浏览器不会传递事件对象，
在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的
*/
e = e || window.e;
/*
获取到鼠标的坐标
clientX和clientY
用于获取鼠标在当前的可见窗口的坐标
div的偏移量，是相对于整个页面的
pageX和pageY可以获取鼠标相对于当前页面的坐标
但是这两个属性在IE8中不支持，所以如果需要兼容IE8，则不可使用
*/
var cx = e.clientX;
var cy = e.clientY;
/*
获取滚动条滚动的距离
chrome认为浏览器的滚动条是body的，可以供过body.scrollTop来获取
火狐等浏览器认为浏览器的滚动条是html的
*/
var stY = document.documentElement.scrollTop;
var stX = document.documentElement.scrollLeft;
cy += stY;
cx += stX;
console.log(cx+" "+cy+" "+stX+" "+stY);
box1.style.left = cx-box1.clientHeight/2+2+"px";
box1.style.top = cy-box1.clientWidth/2+2+"px";
};
};
</script>
</head>
<body id="bd">
<div id="box1"></div>
</body>
</html>
希望本案例对你有所帮助，加油！