纯原生 js 简易实现鼠标拖尾效果

最新推荐文章于 2022-08-20 10:44:20 发布

半个盛唐鸭

最新推荐文章于 2022-08-20 10:44:20 发布

阅读量254

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/bangeshengtang/article/details/126369771

版权

本文介绍如何利用JavaScript实现一个简单的鼠标拖尾效果，动态生成随机颜色和大小的圆点，随着鼠标的移动而移动，最终逐渐消失。

摘要由CSDN通过智能技术生成

实现效果：可以随机生成大小不同颜色不同的圆随后消失

效果视频

鼠标跟随效果

JS部分

<script>
			document.onmousemove = function(event) {
				//1、创建div
				var _div = document.createElement("div");
				//生成随机的宽高
				var random = Math.floor(Math.random() * 30) + 10;
				_div.style.width = random + "px";
				_div.style.height = random + "px";
				_div.style.borderRadius = "50%";
				_div.style.backgroundColor = randomColor();
				//2、定位div
				_div.style.position = "absolute";
				_div.style.left = (event.clientX - random / 2) + "px";