当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jQuery教程:超酷的文字变色效果

Javascript
jQuery中isFunction方法的BUG修复
将函数的实际参数转换成数组的方法
javascript 删除数组中重复项（uniq）
js 巧妙去除数组中的重复项
javascript下一种表单元素获取方法存在的问题
javascript 三种数组复制方法的性能对比
js 多层叠的TAB选项卡
javascript 自动标记来自搜索结果页的关键字
起点页面传值js,有空研究学习下
javascript 的Document属性和方法集合
JavaScript 使用简略语法创建对象的代码
使用JQuery进行跨域请求
jquery 经典动画菜单效果代码
jquery 常用操作方法
js提示信息jtip封装代码，可以是图片或文章
javascript面向对象的方式实现的弹出层效果代码
jquery中的sortable排序之后的保存状态的解决方法
js或css实现滚动广告的几种方案
使用JavaScript库还是自己写代码？
js 右键菜单，支持不同对象不同菜单(兼容IE、Firefox)

No. « 281 282 283 284 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-28   浏览: 110 ::
收藏到网摘: n/a

原作者是大名鼎鼎的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"));
});

当然，这个效果，并不是只能用于链接，只要是内容为文字的元素，都可以使用这个效果。想必这个对一般的高手，都不难吧，大家有没有更好的方法或者在其他框架上实现？请通过评论与我们分享吧！