需求
思路
给容器html标签来一个鼠标移动事件 mouseover
然后不停的计算与页面相关数据 pageX,pageY
然后设置盒子它的left与top值
注意：
盒子需要提前做好定位
设置盒子的left与top值时需要向左向上校正位置（宽高的一半）
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: gold;
border: 2px solid black;
position: fixed;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
// 鼠标移动事件
var body = document.querySelector("html")
var box = document.querySelector(".box")
body.style.backgroundColor = "gold"
body.onmousemove = function (e) {
var pageX = e.pageX
box.style.left = pageX - 100 + "px"
var pageY = e.pageY
box.style.top = pageY - 100 + "px"
}
</script>
</body>
</html>
