从网上学到一个“jquery文字变色”效果，鼠标经过文字变为随机颜色，感觉很有意思。经过学习终于掌握了这种方法，稍稍做了些改进希望能有更多的用途。今天就和大家分享一下这个特效。

效果图（查看演示页面）

原理

将文字例如“abc”分拆为“a”、“b”、“c”三个字符，为每个字符添加单独的标签如“span”；
根据“abc”的字符数进行for循环，通过各“span”标签为各字符定义CSS样式来显示不同的颜色；
定期为文字更换颜色，实现正向、反向的广告牌效果。

html结构

由于操作对象是文字，所以简单到不能再简单：

<p>jQuery纯文本霓虹闪烁效果 - 正向 - 54173BLOG</p>

jQuery

$(function() {
var colors = ["#ff0","#f0f","#0ff"];
//定义颜色数组，包含各种颜色
var text = $(".abc").text();
//获取要操作的文字内容
var cIndex = 0;
//定义全局颜色索引值，0即从第一个颜色开始

var haha = setInterval(function() {
//定期执行以下内容
	var okColor = "";
	//okColor就是把各字符用span标签包装起来，这里初始化为空
	var index = cIndex;
	//定义for循环中的颜色索引值
	for(i = 0;i < text.length;i++) {
	//根据文本长度来循环生成完整的okColor
		var color = colors[index];
		//根据索引值获取到颜色代码
		okColor = okColor + "<span style='color:" + color + ";'>" + text.charAt(i) + "</span>";
		//生成当前字符和它的span标签并定义好颜色
		index++;
		//颜色索引值加1，即下一次操作将调用当前颜色的下一个颜色
		if(index == colors.length) {index = 0;}
		//如果颜色索引值等于颜色数组长度，则从头开始
	}
	//for循环完成，此时okColor已经将文本内容全部重新生成
	$(".abc").html(okColor);
	//用已经生成的okColor替换掉现在的文本内容，以达到换色效果
	cIndex--;
	//全局颜色索引值减1，即下一周期执行时，每个字符将显示当前颜色的上一个颜色	//（第一个字符现在是#0ff，下次将是#f0f，而第二个字符成了#0ff，这样看起来颜色是在向右“走”，本例中称为正向。如果需要反向效果，把下面两句替换成注释里的反向代码即可。）
	//反向：cIndex++
	if(cIndex == -1) {cIndex = colors.length - 1;}
	//如果全局颜色索引值已经减到-1，就没有对应的颜色了，需要再从最后一个颜色开始
	//反向：if(cIndex == colors.length) {cIndex = 0;}
},500);
//以上内容每0.5秒执行一次
});

查看演示页面

这个效果并不完美。每一次换颜色就是把所有的字符重新生成了一遍，造成了闪烁的文字无法复制等等，我会尽最大的努力找到更合适的方法，还请前辈们多多指点。

54173BLOG原创，转载请注明本文链接：http://www.54173.cn/blog/?p=479。

作者：mming。