一个没卵用的鼠标骚特效

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/S_clifftop/article/details/81144100

之前在看一个老哥的博客看到一个比较骚的特效，就是当鼠标移动，后面跟着一条小尾巴，依次是富强、民主等等，于是自己就尝试写代码实现一下，所以我弄了个原生的js实现方法，如果使用jQuery代码更简单，想要我就写。
要看特效 www.sclifftop.com，使用chrome浏览效果好一点，使用手机的话只有点击的时候才会出现

---

先上代码

<script>

(function () {
    var arr = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"];
    var aIndex = 0;
    document.onmousemove = function (ev) {
        var oEvent = ev ? ev : window.event;
        var tSpan = document.createElement('div');
        aIndex = (aIndex + 1) % arr.length;
        var sTxt = document.createTextNode(arr[aIndex]);
        tSpan.appendChild(sTxt);
        tSpan.style.left = (oEvent.clientX - 35) + 'px';
        tSpan.style.top = (oEvent.clientY - 20) + 'px';
        tSpan.style.position = 'absolute';
        tSpan.style.width = '34px';
        tSpan.style.height = '17px';
        tSpan.style.fontWeight = "bold";
        tSpan.style.color = "#2B9499";
        tSpan.style.fontSize = 20;
        tSpan.style.opacity = 0.76;
        tSpan.style.zIndex = 100000;
        document.body.appendChild(tSpan);
        setTimeout(function () {
            document.body.removeChild(tSpan);
        }, 380)
    }
})();
</script>

---

稍微解释一下：

1、首先使用的是立即执行函数，这个表示直接调用执行
2、然后添加了事件监听onmousemove，当鼠标移动时就执行
3、aIndex每次加1，取arr元素，你也可以写成随机来取，要放到监听外，不然每次都会置0，就只能取“民主”
4、首先使用document.createElement()来创建div元素，然后使用document.createTextNode()来创建新文本节点，参数是要插入的文本，然后将文本节点插入div，然后把div插入body
5、然后就是对一些样式的修改，对文本样式修改不要对sTxt来改，对div来改，还有zIndex表示堆叠顺序，越大越靠前
6、也设了一个定时器，380ms移除插入body的div元素，不然就会一直存在
7、如果太烦，可以将onmousemove换成onmousedown之类的事件，这样就会变成点击的时候出现，试一下

---