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

最新推荐文章于 2022-12-20 15:36:28 发布

瓶中蛇

最新推荐文章于 2022-12-20 15:36:28 发布

阅读量1.5k

点赞数 4

分类专栏：资源文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_63597494/article/details/125301495

版权

资源专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用方法：

在 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>