DIV CSS 佈局教程網

網頁制作poluoluo文章簡介：原作者是大名鼎鼎的Mootools和jQuery高手David Walsh，那個鏈接變色比較優雅一些。今天我要給大家帶來一款更酷的文字變色效果。

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

看一下demo先.

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

其實這種效果來自於知名開源微博chyrp，它實現起來也並不難。基本原理是使用charAt()函數將文字打散並逐個設置字體顏色，當然，也要用到jquery的選擇器和相關函數。

定義色彩數組先，這裡定義了7個，當然可以定義更多。

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

核心函數:

1
2
3
4
5
6
7
8
9
10
11
12

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()函數應用到相關對象上：

1
2
3
4
5
6

 $(".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()：

1
2
3
4
5
6
7
8

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

當然，這個效果，並不是只能用於鏈接，只要是內容為文字的元素，都可以使用這個效果。想必這個對一般的高手，都不難吧，大家有沒有更好的方法或者在其他框架上實現？請通過評論與我們分享吧！