盒子跟随鼠标
css
div {
position: fixed; //用固定定位,相对于视口
width: 100px;
height: 100px;
background-color: orange;
border-radius: 50%;
}
js
<div></div>
<script>
const div = document.querySelector("div")
//获取鼠标相对于网页的位置,写在鼠标移动事件里,动态获取
window.addEventListener("mousemove", function (e) {
//获取鼠标相对于视口的位置
let x = e.clientX
let y = e.clientY
//将坐标应用给盒子,获取盒子坐标回一半
div.style.left = x - div.offsetWidth / 2 + "px"
div.style.top = y - div.offsetHeight / 2 + "px" }) </script>