文章來源地址http://www.zghlxwxcb.cn/news/detail-739389.html
<!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;
/* 該元素不能對鼠標(biāo)事件做出反應(yīng) */
/* 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%);
/* 小球跟隨鼠標(biāo)的速度 越小越快 */
transition: all 0.1s;
}
</style>
</head>
<body>
<div class="box">
<div class="dot"></div>
</div>
<script>
const rdot = document.querySelector('.dot');
// 監(jiān)聽事件：鼠標(biāo)被移動
document.addEventListener('mousemove',function(e){
rdot.style.top = e.pageY + 'px';
rdot.style.left = e.pageX + 'px';
})
// 鼠標(biāo)指針移動到元素上時觸發(fā)
document.addEventListener('mouseenter',function(){
rdot.style.opacity = 1
})
// 鼠標(biāo)指針移出元素時觸發(fā)
document.addEventListener('mouseleave',function(){
rdot.style.opacity = 0
})
</script>
</body>
</html>
文章來源：http://www.zghlxwxcb.cn/news/detail-739389.html
到了這里，關(guān)于html+css+js實現(xiàn)小紅點跟隨鼠標(biāo)移動的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
