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

2024-09-06 20:04:34

字體：大中小

來源：轉載

供稿：網友

原作者是大名鼎鼎的mootools和jquery高手david walsh，那個鏈接變色比較優雅一些。今天我要給大家帶來一款更酷的文字變色效果。

看一下demo先.

正如你看到的那樣，當你將鼠標放到文字上去的時候，文字就會變成五顏六色的。

其實這種效果來自于知名開源微博chyrp，它實現起來也并不難?；驹硎鞘褂胏harat()函數將文字打散并逐個設置字體顏色，當然，也要用到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"));});