js鼠标点击出现文字特效

小泽 2020-01-14 00:09 0条评论
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<script>
window.onload = function() {
//定义点击出现文字类
function ClickFrontShow() {
//定义所需文字和颜色
this.fron = ['谢谢', '加油', '拼搏', '幸运', '玉如意','心想事成','相信自己'];
this.colo = ['#FF69B4', '#ff6651', 'orange', '#FF00FF', '#00FF7F', '#00BFFF', '#BA55D3'];
//获取body元素
this.elBody = document.getElementsByTagName("body")[0];
//初始化randomNum
this.randomNum = null;
//初始化字体inde
this.finde = 0;
//初始化className
this.cls = 0;
}
//定义初始化
ClickFrontShow.prototype.init = function(frontArray, colorArray) {
//自定义颜色和字体
this.fron = frontArray || this.fron;
this.colo = colorArray || this.colo;
this.listenMouse();
}
//创建文字 
ClickFrontShow.prototype.createFront = function (classname) {
var self = this;
ospan = document.createElement('span');
//设置样式
cssText = "position:absolute; width: 100px; height: 20px; cursor: default; transform: translate(-50%,-50%); font-weight: bold; opacity: 1; z-index: 1000; transition: 1s;";
//随机字体和颜色
randomFront = self.fron[self.finde];
randomColor = self.colo[Math.round(Math.random()*(self.colo.length-1))];
//字体下标增1
self.finde = (self.finde+1) % self.fron.length;
//向body中添加元素
self.elBody.appendChild(ospan);
//绑定一个classname
ospan.className = String(classname);
//添加样式
ospan.style.cssText = cssText + "-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;"
ospan.style.color = randomColor;
ospan.innerHTML = randomFront;
}
//监听鼠标点击
ClickFrontShow.prototype.listenMouse = function() {
var self = this;
//鼠标点击事件
document.onclick = function(e) {
//避免classname值重复导致出现bug
if(self.cls === 20){
self.cls = 0;
}else{
self.cls += 1;
}
//创建文字
self.createFront(self.cls);
el = document.getElementsByClassName(self.cls)[0];
//鼠标点击位置,文字出现位置
el.style.left = e.clientX + 'px';
el.style.top = e.clientY + 20 + 'px';
//过时改变
setTimeout(function() {
el.style.opacity = 0;
el.style.top = el.offsetTop - 100 + 'px';
}, 500);
//停留时间,不能点击过快
setTimeout(function() {
self.elBody.removeChild(el);
}, 2000);
}
}
//实例化
var frontShow = new ClickFrontShow();
//用户可在此传递参数,默认第一个参数是字体数组;
//第二个参数是颜色数组,必须是数组类型!
frontShow.init();
 }
</script>
</body>
</html>

效果图:

image.png

本文标签: js, 鼠标, 点击, 出现, 文字, 特效
0.0

说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!