JS实现点击鼠标弹出自定义文字内容效果

最新推荐文章于 2023-08-28 16:31:58 发布

T型人小付

最新推荐文章于 2023-08-28 16:31:58 发布

阅读量1.8k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/Victor2code/article/details/106672772

版权

前端专栏收录该内容

26 篇文章 2 订阅

订阅专栏

之前看到有朋友自己搭建的博客网站，在页面任意位置点击鼠标都会弹出自定义文字，而且内容会不停变化，觉得非常炫酷，今天自己试着来实现一下这个效果。

思路分析

主要是对document添加一个click事件，每次点击会生成一个新标签，这个标签初始位置通过获取click的event事件来获得。之后通过一个定时器setInterval实现缓慢向上的效果，然后用另一个定时器setTimeOut在一段时间后清除掉上一个定时器并且删除添加的新标签。

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>				
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
	</style>
	<body>	
	<script type="text/javascript">
		var body = document.getElementsByTagName('body')[0];
		var textArr=["乐观", "❤" ,"积极", "向上", "自由", "正能量","(*^▽^*)", "元气满满", "开心" ,"快乐", "善良", "可爱", "暴富", "暴瘦"];
		document.addEventListener('click',(e)=>{
			// 生成字符串
			var ev = e || window.event;
			var baseX = ev.pageX;
			var baseY = ev.pageY;
			var new_span=document.createElement('span');
			new_span.innerText=textArr[parseInt(Math.random()*textArr.length)]
			new_span.style.position='fixed';
			new_span.style.left=baseX-10+'px';
			new_span.style.top=baseY+'px';
			new_span.style.color='RGB('+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+')';
			body.appendChild(new_span);
			// 定时器1实现字符串上升效果
			var timer = window.setInterval(()=>{
				new_span.style.top=parseInt(window.getComputedStyle(new_span,null)['top'])-2+'px';
				// console.log(window.getComputedStyle(new_span,null)['fontSize']);
				new_span.style.opacity=window.getComputedStyle(new_span,null)['opacity']-0.02;
				
			},30);
			// 定时器2实现字符串消失
			window.setTimeout(()=>{
				window.clearInterval(timer);
				body.removeChild(new_span);
			},1000);
		},false);

	</script>
	</body>
</html>

其中第一部分将文字的position设置为fixed是关键，这样文字可以出现在页面中任意位置。第二部分的定时器每隔30ms移动一次文字的高度以及透明度，第三部分的定时器在1秒钟之后将前面的定时器消除并删除文字。

实现效果

我是T型人小付，一位坚持终身学习的互联网从业者。喜欢我的博客欢迎在csdn上关注我，如果有问题欢迎在底下的评论区交流，谢谢。

T型人小付

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
JS实现点击鼠标弹出自定义文字内容效果

之前看到有朋友自己搭建的博客网站，在页面任意位置点击鼠标都会弹出自定义文字，而且内容会不停变化，觉得非常炫酷，今天自己试着来实现一下这个效果。思路分析主要是对document添加一个click事件，每次点击会生成一个新标签，这个标签初始位置通过获取click的event事件来获得。之后通过一个定时器setInterval实现缓慢向上的效果，然后用另一个定时器setTimeOut在一段时间后清除掉上一个定时器并且删除添加的新标签。代码实现<!DOCTYPE html><html&g
复制链接

扫一扫