鼠标跟随
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标跟随demo</title>
<style type="text/css">
.kuang{
width: 30px;
height: 30px;
background-color: red;
background-size: 100% 100%;
position: absolute;
}
</style>
</head>
<body>
<script>
window.onclick = function(e){
let div = document.createElement('div')
div.classList.add('kuang')
let x = e.pageX
let y = e.pageY
div.style.left = x + 'px'
div.style.top = y + 'px'
document.body.appendChild(div)
let rnd = Math.round(Math.random())
let timer = setInterval(()=>{
y-=10;
if(rnd) x-=10;
else x+=10
div.style.top = y +'px'
div.style.left = x + 'px'
if(y<-100){
div.remove();
clearInterval()
}
},100)
}
</script>
</body>
</html>