鼠标点击弹出随机文字，富强，民主等

通过鼠标点击，弹出浮动各式各样的内容，可以增加网站的互动，网上很多时需要依赖jquery才能实现，

具体效果，可以参考本站的鼠标点击的效果。

本篇教程是，通过原生js代码编写：直接将以下代码复制到html网页头部，或者说html底部模板文件里，任意html 文件都可以实现。


<script type="text/javascript">
    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;
            let ospan = document.createElement('span');
            //设置样式
            let cssText = "position:absolute; width: 80px; 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))];
            //字体下标增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);
                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);
                }, 3000);
            }
        }
        //实例化
        var frontShow = new ClickFrontShow();
        //用户可在此传递参数，默认第一个参数是字体数组；
        //第二个参数是颜色数组，必须是数组类型！
        frontShow.init();
    }
</script>
</body>
<script type="text/javascript">
    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;
            let ospan = document.createElement('span');
            //设置样式
            let cssText = "position:absolute; width: 80px; 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))];
            //字体下标增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);
                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);
                }, 3000);
            }

        }
        //实例化
        var frontShow = new ClickFrontShow();
        //用户可在此传递参数，默认第一个参数是字体数组；
        //第二个参数是颜色数组，必须是数组类型！
        frontShow.init();
    }
</script>
</body>
<script type="text/javascript">
    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;
            let ospan = document.createElement('span');
            //设置样式
            let cssText = "position:absolute; width: 80px; 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))];
            //字体下标增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);
                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);
                }, 3000);
            }

        }
        //实例化
        var frontShow = new ClickFrontShow();
        //用户可在此传递参数，默认第一个参数是字体数组；
        //第二个参数是颜色数组，必须是数组类型！
        frontShow.init();
    }
</script>
</body>

版权声明本站名称：大雄搜集站
本站永久网址：https://soujiz.com
1 本站资源大多存储在云盘，如有链接失效，请留言反馈站长更新！
2 本站各种资源及源码软件大部分为网络搜集而来，如有侵犯版权的，请邮件与我们联系，本站将予以改正。
3 由于网络资源有极快的复制性，付费资源一经购买，不以任何形式退款，购买过程中如有付费资源失效，请及时联系站长。

THE END