js实现鼠标点击页面弹出自定义文字效果
本文实例为大家分享了js鼠标点击页面弹出文字的具体代码，供大家参考，具体内容如下
效果：
实现代码：
(function(e){
//点击事件触发生生元素等一系列动作的初始状态
varbombFlag=true;
//body节点
varelBody=document.getElementsByTagName("body")[0];
//初始化文字数组下标
vara_idx=0;
elBody.onclick=function(e){
if(bombFlag){
//坐标
varev=e||event,//IE浏览器兼容
x=ev.clientX,
y=ev.clientY;
//随机产生文字颜色
varcolor1=Math.floor((Math.random()*255));
varcolor2=Math.floor((Math.random()*255));
varcolor3=Math.floor((Math.random()*255));
//初始化定时器
var_timer=null;
//文字数组
vara=newArray("乐观","❤","积极","向上","自由","正能量","(*^▽^*)","元气满满","开心","快乐","善良","可爱","暴富","暴瘦","❤");
//创建节点
varelSpan=document.createElement("span");
//随机节点内容
a_idx=(a_idx+1)%a.length;
//添加内容到节点
elSpan.innerHTML=a[a_idx];
//初始节点化样式
elSpan.style.zIndex=999;
elSpan.style.position="fixed";
elSpan.style.top=y-20+"px",
elSpan.style.left=x-10+"px";
elSpan.style.color='rgb('+color1+','+color2+','+color3+')';
elSpan.style.fontWeight="bold";
elSpan.className="floatSpan";
//将元素追加到body中
elBody.appendChild(elSpan);
//获取追加后的节点
varel=document.getElementsByClassName("floatSpan")[0];
//初始化需要渐变的变量值
//top值
varcur_y=y-20;
//透明度
varcur_opacity=1;
//字体大小
varcur_fontSize=14;
//创建定时器
_timer=setInterval(function(){
//渐变变量
cur_y+=-10;
cur_opacity-=0.1;
cur_fontSize+=1;
//渐变变量赋值（因为有单位的关系所以不能直接加减通过中间变量来赋值）
el.style.top=cur_y+"px";
el.style.opacity=cur_opacity;
el.style.fontSize=cur_fontSize+"px";
},50);
//时间到了之后清空定时器清除刚才添加的元素并且恢复点击触发事件
setTimeout(function(){
clearInterval(_timer);
elBody.removeChild(el);
bombFlag=true;
},500);
}
//暂停点击触发事件
bombFlag=false;
};
})();
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。