700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > JS实现鼠标点击出现文字特效

JS实现鼠标点击出现文字特效

时间:2022-10-09 17:48:54

相关推荐

JS实现鼠标点击出现文字特效

使用方法:

在 WordPress 主题的 footer.php 文件中 <?php wp_footer(); ?> 的前面加上一段代码。

JS代码如下:

<script>window.onload = function () {function ClickFrontShow() {this.fron = ['忆', '', '❤', '回忆', '悦', '1琦', '乐', '琦', '悦', '忆', '琦', '腾', '跃', '快'];this.colo = ['orange', 'red', 'orange', '#FF50FF', 'yellow', '#00B35F', '#ff55D3'];this.elBody = document.getElementsByTagName("body")[0];this.randomNum = null;this.finde = 0;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;let ospan = document.createElement('span');let cssText = "position:absolute; width: 40px; height: 20px; cursor: default; transform: translate(-50%,-50%); font-weight: bold; opacity: 1; z-index: 1000; transition: 1s;";let randomFront = self.fron[self.finde];let randomColor = self.colo[Math.round(Math.random() * (self.colo.length - 1))];self.finde = (self.finde + 1) % self.fron.length;self.elBody.appendChild(ospan);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) {if (self.cls === 20) {self.cls = 0;} else {self.cls += 1;}self.createFront(self.cls);let el = document.getElementsByClassName(self.cls)[0];el.style.left = e.clientX + 'px';el.style.top = e.clientY + 'px';setTimeout(function () {el.style.opacity = 0;el.style.top = el.offsetTop - 100 + 'px';}, 100);setTimeout(function () {self.elBody.removeChild(el);}, 2000);}}var frontShow = new ClickFrontShow();frontShow.init();}</script>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。