鼠标点击特效二

最新推荐文章于 2024-08-18 10:16:05 发布

-ZN_

最新推荐文章于 2024-08-18 10:16:05 发布

阅读量1.6k

点赞数 2

分类专栏： JS 特效文章标签： js特效

本文链接：https://blog.csdn.net/qq_38398733/article/details/86258085

版权

JS 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

特效

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
		
		(function(){
			window.onclick = function(event){

				var heart = document.createElement("b");	//创建b元素
				heart.onselectstart = new Function('event.returnValue=false');	//防止拖动

				document.body.appendChild(heart).innerHTML = "❤";		//将b元素添加到页面上
				heart.style.cssText = "position: fixed;left:-100%;";	//给p元素设置样式

				var f = 16, 	// 字体大小
	                x = event.clientX - f / 2, // 横坐标
	                y = event.clientY - f, // 纵坐标
	                c = randomColor(),  // 随机颜色
	                a = 1, 				// 透明度
	                s = 1.2; 			// 放大缩小

				var timer = setInterval(function(){		//添加定时器
					if(a <= 0){
						document.body.removeChild(heart);
						clearInterval(timer);
					}else{
						heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" + c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" + s + ");";

	                    y--;
	                    a -= 0.016;
	                    s += 0.002;
					}
				},15)

			}
			 // 随机颜色
	        function randomColor() {

	            return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + ")";

	        }
		}());
	</script>
</body>
</html>