<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;padding: 0;
}
.box{
width: 100vw;
height: 100vh;
/* 该元素不能对鼠标事件做出反应 */
/* pointer-events: none; */
overflow: hidden;
background: pink;
}
.dot {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
position: absolute;
top: 0px;
left: 0px;
transform: translate(-100%,-100%);
/* 小球跟随鼠标的速度 越小越快 */
transition: all 0.1s;
}
</style>
</head>
<body>
<div class="box">
<div class="dot"></div>
</div>
<script>
const rdot = document.querySelector('.dot');
// 监听事件：鼠标被移动
document.addEventListener('mousemove',function(e){
rdot.style.top = e.pageY + 'px';
rdot.style.left = e.pageX + 'px';
})
// 鼠标指针移动到元素上时触发
document.addEventListener('mouseenter',function(){
rdot.style.opacity = 1
})
// 鼠标指针移出元素时触发
document.addEventListener('mouseleave',function(){
rdot.style.opacity = 0
})
</script>
</body>
</html>
