博客首页实现鼠标单击上飘文字

ginginw

已于 2022-05-01 17:13:36 修改

阅读量164

点赞数

文章标签： javascript

于 2022-03-26 00:00:00 首次发布

本文链接：https://blog.csdn.net/weixin_54182780/article/details/123716541

版权

最近看到很多博客有鼠标单击就上飘文字的功能，我也写一写超大字体（x-large）自定义文字和颜色的功能
二话不说先上代码

var body = document.getElementsByTagName('body')[0];
var textArr=["JS", "CSS" ,"html", "Python", "C++", "Java"]; //文字内容（轮播）
var color=["rgb(57, 37, 233)","rgb(252, 91,32)","rgb(0,255,255)","rgb(127,255,0)","rgb(255,20,27)","rgb(255,0,255)","rgb(0,255,76)"]; //颜色（随机）
var index_i=0;
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[index_i];
	new_span.style.position='fixed';
	new_span.style.left=baseX-10+'px';
	new_span.style.top=baseY+'px';
	new_span.style.color=color[parseInt(Math.random()*color.length)];
    new_span.style.fontSize="x-large" //字体大小
	body.appendChild(new_span);
    index_i++;
    if(index_i>textArr.length-1)index_i=0; //通用形式不用修改
	// 定时器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);