Web实现在鼠标或点击处的文字特效

您所在的位置：网站首页 › 设置鼠标点击样式 › Web实现在鼠标或点击处的文字特效

Web实现在鼠标或点击处的文字特效

#Web实现在鼠标或点击处的文字特效| 来源: 网络整理| 查看: 265

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); 元素创建使用 document.createElement("标签名");，这里就用span标签就可以了 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 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 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); }

一键三连嘛？

【本文地址】

Web实现在鼠标或点击处的文字特效

Web实现在鼠标或点击处的文字特效

今日新闻

推荐新闻