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>

JS实现鼠标点击出现文字特效相关推荐

鼠标特效代码 php_鼠标特效——鼠标点击出现文字效果
之前有人问我鼠标点击出现文字效果是怎么实现的,这个我只能说是从别人网站上看到的代码,为了大家使用方便,在这里我给大家分享一下.使用方法也很简单,只需要两步: 1.登录后台--外观--编辑,找到foot ...
JS实现鼠标点击爱心绘制多边形每日一言功能
本篇文章主要介绍我的个人博客程序猿刘川枫中页面使用的美化功能(基于JS实现): 1.鼠标点击出现不同颜色爱心特效 2.页面浮动多边形跟随鼠标移动 3.每日一言功能 1.鼠标点击出现爱心特效经常在 ...
html点击鼠标页面出现爱心,js实现鼠标点击飘爱心效果
本文实例为大家分享了js实现鼠标点击飘爱心的具体代码,供大家参考,具体内容如下鼠标点击特效 html { cursor: pointer; } h3 { text-align: center; us ...
点击编辑框全选内容java,js实现鼠标点击文本框自动选中内容的方法
本文实例讲述了js实现鼠标点击文本框自动选中内容的方法.分享给大家供大家参考.具体如下: 这里使用JS实现鼠标点击时自动选中文本框文本的效果,相信许多朋友都遇到这种功能的,就是当我们点击文本框的时候, ...
JS实现鼠标点击展开/隐藏表格行
<title>JS实现鼠标点击展开/隐藏表格行_网页代码站(www.webdm.cn)</title> <script language="javascript ...
屏蔽节点的鼠标点击选择文字的方法
屏蔽节点的鼠标点击选择文字的方法 -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; -ms-user-s ...
html5统计鼠标点击的次数,怎么实现js统计鼠标点击次数
学习前端的同学你们知道怎么JS实现在线统计一个页面内鼠标点击次数的方法吗?不知道的话跟着学习啦小编一起来学习JS实现在线统计一个页面内鼠标点击次数的方法. 本文实例讲述了JS实现在线统计一个页面内鼠标 ...
JS实现鼠标点击处烟花爆炸效果
JS实现鼠标点击处烟花爆炸效果(面向对象版) 程序由网上开源"JS实现放烟花效果"代码改编,实现在鼠标点击处出现烟花爆炸效果. 改编前源码link https://github. ...
点击网页鼠标处飞出文字特效jQuery
这个特效笔者还真找不出什么特别贴切的标题来描述,直接看看效果图吧.哦对了,这个特效的灵感是笔者自己浏览一些网页的时候,鼠标点击,就会弹出或是文字或是图片,觉得新鲜就做了一个小的demo,还需完善,仅供 ...
php点击弹出文字代码,js实现鼠标点击页面弹出自定义文字效果
本文实例为大家分享了js鼠标点击页面弹出文字的具体代码,供大家参考,具体内容如下效果: 实现代码: (function(e){ // 点击事件触发生生元素等一系列动作的初始状态 var bombFl ...

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

JS实现鼠标点击出现文字特效相关推荐

最新文章

热门文章