使用css和js实现鼠标拖尾效果

实现步骤解析：

1.这原本是一个鼠标后面跟随一串英文字母的效果，
2.后来我就想，运用随机数字母的颜色做成彩色的，
3.并且每一个字母的色彩是随机分配而不是我自己手动填写的。

js：

1.var coor = “rgb(” + Math.floor(Math.random() * 256) + “,” + Math.floor(Math.random() * 256) + “,” + Math.floor(Math.random() * 256) + ")"生成随机颜色；
2.其代码核心是 Math.floor(Math.random()*255) 这句，他获取到的是0-255之间的任意一个值；
3. 然后把r,g,b三个值分别用这句代码代替，凑成一个整的颜色值字符串赋给变量，最后弹出就ok了。
4. onmousemove函数中，是当鼠标有移动的时候会发生的事情；
5.本来i的for循环是在这个函数的外边的，我为了让字母可以随时随地换随机颜色，就把他放进了鼠标事件里边，每当鼠标移动一次，就从新调用一个颜色值，这样就会在鼠标移动的时候变颜色了；
6.一开始只添加window.setInterval()函数，使拖尾的字母逐渐消失： * var setInterval = window.setInterval(function() { if (opacity <= 0) { window.clearInterval(setInterval); } else { opacity = (opacity - 0.1); newEle.style.opacity = opacity; } }, 100) 之后发现页面上会出现大量div在页面上，导致拖尾效果变慢，随后加入了：newEle.remove()； 用于每次透明的度消失后直接移除元素。

css：

1.为js创建的div设置样式css： position: absolute; js： newEle.style.left = (event.clientX + 10) + “px”; newEle.style.top = (event.clientY + 10) + “px”; 会根据鼠标的位置显示字符串。
2. -moz-user-select: none; -khtml-user-select: none; user-select: none; 将div设置鼠标不可选择（不设置该属性，会对点击事件造成影响）

<style type="text/css">
    div
    {
        position: absolute;
        width: 1em;
        height: 1em;
        display: block;
        -moz-user-select: none;
        -khtml-user-select: none;
        user-select: none;
    }
</style>

<script type="text/javascript">
    window.onmousemove = function(event) {
        var arr = ForATOZChar();
        //随机出1-16的数字
        var randomNum = Math.floor(Math.random() * 0x10);
         //随机出字体颜色
        var coor = "rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + ")";
        //创建元素跟随鼠标
        var newEle = document.createElement("div");
        newEle.innerText = arr[randomNum];
        document.body.appendChild(newEle)
        newEle.style.left = (event.clientX + 10) + "px";
        newEle.style.top = (event.clientY + 10) + "px";
        newEle.style.color = coor;
        var opacity = parseFloat(1);
        var toppx = (event.clientY + 20);
       // 设置一秒逐渐消失
        var setInterval = window.setInterval(function() {
            if (opacity <= 0) { window.clearInterval(setInterval); newEle.remove(); } else {
                opacity = (opacity - 0.1);
                newEle.style.opacity = opacity;

            }
        }, 100)
    }
    //循环输出A-O字母
    function ForATOOChar() {
        var charArr = [];
        for (var i = 0; i < 17; i++) {
            charArr[i] = String.fromCharCode((65 + i))
        }
        return charArr;
    }
    </script>

         ***第一次发布(有用记得点赞哦！！！)***

本文地址：https://blog.csdn.net/weixin_43941291/article/details/107363663