jQuery教程:超酷的文字变色效果

2024-09-06 20:04:34

字体：大中小

来源：转载

供稿：网友

原作者是大名鼎鼎的mootools和jquery高手david walsh，那个链接变色比较优雅一些。今天我要给大家带来一款更酷的文字变色效果。

看一下demo先.

正如你看到的那样，当你将鼠标放到文字上去的时候，文字就会变成五颜六色的。

其实这种效果来自于知名开源微博chyrp，它实现起来也并不难。基本原理是使用charat()函数将文字打散并逐个设置字体颜色，当然，也要用到jquery的选择器和相关函数。

定义色彩数组先，这里定义了7个，当然可以定义更多。

var colors = ["#ff2e99", "#ff8a2d", "#ffe12a", "#caff2a", "#1fb5ff", "#5931ff", "#b848ff"]

核心函数:

123456789101112

function colorize(text) {    var colorized = ""    var bracket_color = ""    for (i = 0; i < text.length; i++) {        var index = math.floor(math.random()*7)        if (text[i] == "(")            bracket_color = colors[index]            color = (bracket_color.length && (text[i] == "(" || text[i] == ")")) ? bracket_color : colors[index]//取色    		colorized = colorized + '<span style="color: '+color+' !important">' + text.charat(i) + '</span>' //重构		}    return colorized}

最后，使用jquery选择器将colorize()函数应用到相关对象上：

 $(".colorize").bind("mouseenter", function(){        $(this).data("text", $(this).text());		$(this).html(colorize($(this).text()));	}).bind("mouseleave", function(){		$(this).html($(this).data("text"));	});

这里使用了jquery的bind()函数绑定了两个事件：mouseenter和mouseleave，其实这样稍有些麻烦，我们可以简化一些，换做hover()：

12345678

$(".colorize2").hover(	function(){		$(this).data("text", $(this).text());		$(this).html(colorize($(this).text()));		},	function(){		$(this).html($(this).data("text"));});