一个没卵用的鼠标骚特效

之前在看一个老哥的博客看到一个比较骚的特效，就是当鼠标移动，后面跟着一条小尾巴，依次是富强、民主等等，于是自己就尝试写代码实现一下，所以我弄了个原生的js实现方法，如果使用jQuery代码更简单，想要我就写。

---

先上代码

<script>

(function () {
	//不赞成显式地使用Array构造函数来创建数组，也就是尽量不要用new Array()
	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);
		//不要一条一条地修改DOM的样式，只是让你们看一下，不要这样写
		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之类的事件，这样就会变成点击的时候出现，试一下
8、不要一条一条地修改DOM的样式，不要像上面那样写，上面只是写出样式
9、设置为不可点击，这样就不会妨碍点击，自己加

---

---