I’m Shendi

文章目录

• 效果展示
• 实现思路
• 效果实现
• • 元素样式
  • 点击事件
  • • 获取位置
    • 创建元素
    • 将元素加入document
  • 元素移动消失效果
  • 最终代码

效果展示

进入以下链接直接体验
https://sdpro.top/html/main.html

视频展示

js在鼠标点击后弹出文字特效演示

实现思路

给document增加点击事件，点击时在点击位置生成文字并使用js延时来制作动画效果

效果实现

首先生成的为文本，所以需要准备一个文本标签（当然也可以用图片标签等…）

元素样式

生成的文本在鼠标点击处，所以一般position为absolute或者fixed，absolute会影响页面，这里使用fixed

元素在其他元素上面，z-index需要给一个较大值
文本不需要换行，也不需要选中，于是css如下（也可以用js设置）

.effect_ele {position: fixed;z-index: 9999;font-size: 14px;white-space: nowrap;/* 让元素不能被选中 */-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
}

点击事件

所有元素都能触发这个特效，所以直接给document增加点击事件

document.documentElement.addEventListener('click', function (event) {
});

获取位置

在点击事件中的 event 参数包含了点击位置信息，因为使用的 fixed，所以使用 clientX，clientY拿到位置，默认生成的位置应该在点击位置的上面一点，所以 y 默认减去一定的像素

var x = event.clientX, y = event.clientY - 10;

创建元素

特效效果为点击出现文字后文字慢慢消失并往左上/右上移动
而且元素的文字颜色/文字随机变化，于是先创建随机

// 文字列表
var texts = "Test,Shendi,Element,Javascript".split(",");
// 随机文字
var text = texts[Math.floor(Math.random()*100) % texts.length];
// 随机颜色 rgb
var r = Math.floor(Math.random()*255),g = Math.floor(Math.random()*255),b = Math.floor(Math.random()*255);

var ele = document.createElement("span");

文字消失需要使用到透明度（opacity），需要在js里给元素设置透明度为1 (0代表完全透明)

// 只能在js设置,在css里设置后面拿到为 undefined
ele.style.opacity = 1;

将元素初始化，为了美观一点，可以加上文字阴影

// 元素的 class 名称,指定元素样式
ele.className = "effect_ele";
// 元素默认位置
ele.style.left = x + "px";
ele.style.top = y + "px";
// 文字颜色，文字阴影
ele.style.color = "rgb(" +r+ "," +g+ "," +b+ ")";
ele.style.textShadow = "5px 3px 1px rgba(" +r+ "," +g+ "," +b+ ",0.4)";
//  元素内容
ele.innerText = text;

将元素加入document

创建完元素后需要将元素加入文档才能显示，使用 appendChild 函数，函数返回添加后的元素引用

在点击事件中直接使用 this.appendChild

// 这里的元素实例需要保存,后面需要改变元素位置等
var eleInst = this.appendChild(ele);

元素移动消失效果

往上移动，左右则随机，每次移动都减少一点透明度，透明度减完则删除元素，因需要递归，所以封装了一个函数，代码如下

// 参数1为创建的元素引用，参数4为方向
function textAnim(ele, x, y, direction) {// 往上移动，并减少opacity,直至opacity<=0则移除setTimeout(function () {if (ele.style.opacity <= 0) {document.documentElement.removeChild(ele);return;}y -= 1.2;if (direction == 0) {x += 1;} else {x -= 1;}ele.style.top = y + "px";ele.style.left = x + "px";ele.style.opacity = ele.style.opacity - 0.02;textAnim(ele, x, y, direction);}, 11);
}

最终代码

最终代码如下

/*** 实际使用为了避免意外，用 try catch 盖住* @author Shendi*/
try {var texts = "Test,Shendi,Element,Javascript".split(",");document.documentElement.addEventListener('click', function (event) {var x = event.clientX, y = event.clientY - 10;var ele = document.createElement("span");ele.className = "effect_ele";ele.style.left = x + "px";ele.style.top = y + "px";// 只能在这设置,在css里就拿不到了ele.style.opacity = 1;var r = Math.floor(Math.random()*255),g = Math.floor(Math.random()*255),b = Math.floor(Math.random()*255);ele.style.color = "rgb(" +r+ "," +g+ "," +b+ ")";ele.style.textShadow = "5px 3px 1px rgba(" +r+ "," +g+ "," +b+ ",0.4)";ele.innerText = texts[Math.floor(Math.random()*100) % texts.length];textAnim(this.appendChild(ele), x, y, Math.floor(Math.random()*10)%2);});/* direction 1左 0右 */function textAnim(ele, x, y, direction) {// 往上移动，并减少opacity,直至opacity<=0则移除setTimeout(function () {if (ele.style.opacity <= 0) {document.documentElement.removeChild(ele);return;}y -= 1.2;if (direction == 0) {x += 1;} else {x -= 1;}ele.style.top = y + "px";ele.style.left = x + "px";ele.style.opacity = ele.style.opacity - 0.02;textAnim(ele, x, y, direction);}, 11);}
} catch (e) {console.log(e);
}

一键三连嘛？