关键词：
I’m Shendi
文章目录
效果展示
进入以下链接直接体验
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<=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);
一键三连嘛？
web实现在鼠标或点击处的文字特效(代码片段)
I’mShendi文章目录效果展示实现思路效果实现元素样式点击事件获取位置创建元素将元素加入document元素移动消失效果最终代码效果展示进入以下链接直接体验https://sdpro.top/html/main.html视频展示js在鼠标点击后弹出文字特效演示实... 查看详情
点击或移动出现爱心或文字(代码片段)
前言 有时候访问某些网站时鼠标移动或者点击出现一些较为炫酷的动画或特效，一般都是个人网站会炫酷些，公司的网站一般不会这么花里胡哨，今天就分享一下鼠标点击或移动出现简单的动画案例(复杂的动画思路也是一... 查看详情
lua实现游戏全局鼠标点击效果(代码片段)
前言最近在优化项目，策划提了一个需求，需要实现一个通用点击特效。尝试1首先想到的是改变鼠标指针样式，这个以前学过，还有点印象，以前刚开始学unity的时候，记得看到过一个方法可以改变游戏中鼠标指针样式。方法如... 查看详情
lua实现游戏全局鼠标点击效果(代码片段)
前言最近在优化项目，策划提了一个需求，需要实现一个通用点击特效。尝试1首先想到的是改变鼠标指针样式，这个以前学过，还有点印象，以前刚开始学unity的时候，记得看到过一个方法可以改变游戏中鼠标指针样式。方法如... 查看详情
鼠标点击特效(代码片段)
鼠标点击空白处会产生指定的文字: 首先你需要申请JS权限，然后在后台管理页脚HTML代码中添加JS代码，最后保存即可。JS具体代码如下：<scripttype="text/javascript">/*鼠标特效*/vara_idx=0;jQuery(document).ready(function($)$("body").click(fu... 查看详情
鼠标点击出现爱心特效(代码片段)
//鼠标点击出现爱心特效(function(window,document,undefined)varhearts=[];window.requestAnimationFrame=(function()returnwindow.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimatio 查看详情
鼠标点击烟花特效(代码片段)
烟花特效介绍就是本站鼠标点击的效果，不放截图了源码部署<scriptsrc="https://blog-static.cnblogs.com/files/zouwangblog/mouse-click.js"></script><canvaswidth="1777"height="841"style="position:fixed;left:0px;top:0px;z-index:999;... 查看详情
博客园鼠标点击特效代码(代码片段)
<scripttype="text/javascript">/*鼠标特效*/vara_idx=0;jQuery(document).ready(function($)$("body").click(function(e)vara=newArray("?富强?","?民主?","?文明?","?和谐?","?自由?","?平等?","?公正?","?法治?", 查看详情
博客园自定义鼠标点击特效(代码片段)
需要申请JS权限，JS权限申请通过之后，将如下代码放入侧边栏，页首，页末，都可以复制如下代码<scripttype="text/javascript">/*鼠标特效*/vara_idx=0;jQuery(document).ready(function($)$("body").click(function(e)vara=newArray("?Linux?","?Shell?","? 查看详情
鼠标点击网页出现文字特效
<!DOCTYPEhtml><htmllang="zh"> <head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"conte 查看详情
博客园添加鼠标点击特效(代码片段)
...;在保存就好了 代码如下<scripttype="text/javascript">/*鼠标特效*/vara_idx=0;jQuery(document).ready(function($)$("body").click(function(e)vara=newArray("?富强?","?民主?","?文明?","?和谐?","?自由?","?平等?","?公正?","?法治?","?爱国?","?敬业?","?诚信?","?... 查看详情
两种方式实现css取消页面鼠标双击选中文字或单击拖动选中文字的效果(代码片段)
问题描述我们知道浏览器页面上的文字正常情况下我们是可以双击选中、或者单击鼠标横向拖动也能选中的，选中以后可以右击出现面板然后去复制什么的。但是有的时候，这种效果我们并不想要的，比如用户点快了... 查看详情
开发中经常用到的特效效果
..._一个个文字输入效果原生js代码制作图片3D动态效果随着鼠标移动图片3D排列点击》原生js代码制作图片3D动态效果随着鼠标移动图片3D排列原生js代码制作彩色烟花绽放效果_鼠标点击放彩色烟花效果https://www.mk2048.com/demo/demo_target_d... 查看详情
鼠标点击特效：点击网站页面显示24字核心价值观上升的特效代码(代码片段)
...tml中包含这个文件）<scripttype="text/javascript">/*鼠标点击特效*/vara_idx=0;jQuery(document).ready(function($)$("body").click(function(e)vara=newArray("富强","民主","文明","和谐","自由","平等&q... 查看详情
wordpress里用啥插件或代码能实现鼠标悬停图片上出现文字说明的效果？
wordpress里用什么插件或代码能实现鼠标悬停图片上出现文字说明的效果？这不需要任何插件，只需要修改页面代码，在img标签或a标签中加入title=“你要显示的文字”；即可。例如在a标签中，当鼠标移动到“相关介绍”上，弹出... 查看详情
社会主义核心价值观，桌面鼠标点击特效(代码片段)
受油猴子上的作者cherry制作的“网页鼠标点击特效”启发，于是稍加修改和制作，完成了SteamWallpaperEngine版本的桌面鼠标点击特效。Steam链接??：https://steamcommunity.com/sharedfiles/filedetails/?id=1609057588 完成效果如下图： &n... 查看详情
监控鼠标的位置点击实现圆形扩散动画(代码片段)
原文:监控鼠标的位置点击实现圆形扩散动画首先看效果图如下：一、要实现如下的效果我们先分析都要什么？1：首先我们要先实现这个动画扩散效果。2：然后当鼠标点击该标签时，你需要在他的下面新增一个标签并把这个动画... 查看详情
如何实现人物闪白的游戏特效
...的软件并能做出简单的动画 通过MAX制作，AE的合成，实现2D特效的完美配合，这其中会涉及到特效的一个较强的节奏感，并且熟练的运用到光效的效果，例如golw，shine等，让我们能自己独立制作2D 查看详情