盒子跟随鼠标 (2步走)

119 阅读1分钟

盒子跟随鼠标

image.png

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>