鼠标跟随效果demo

最新推荐文章于 2024-09-11 23:16:45 发布

zl_41123262

最新推荐文章于 2024-09-11 23:16:45 发布

阅读量166

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_41123262/article/details/106908856

版权

鼠标跟随

<!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 
				div.classList.add('kuang')  // 添加 class 类名
				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())  // 生成随机数，使其要么为0，要么为1
				let timer = setInterval(()=>{
					y-=10;
					if(rnd) x-=10; // 如果为1，向左移动
					else x+=10  // 为0，则向右移动
					div.style.top = y +'px'  
					div.style.left = x + 'px'
					if(y<-100){  // 超出界面时，清除 div 和定时器
						div.remove();
						clearInterval()
					}
				},100)
			}
		</script>
	</body>
</html>

zl_41123262

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标跟随效果demo

鼠标跟随<!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% 10
复制链接

扫一扫