当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 不错的文字特效,逐字变色效果

Javascript
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
JS Array对象入门分析
javascript typeof的用法与typeof运算符介绍[详细]
js CSS操作方法集合
让任务管理器中的CPU跳舞的js代码
ajax无刷新动态调用股票信息(改良版)
js Clip的奇思妙想之文字拼接效果
js Clip奇思妙想之多彩渐变字效果
JS 创建对象(常见的几种方法)
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
JS提交并解析后台返回的XML的代码
初学Javascript的一些总结
JS 继承实例分析
js form action动态修改方法
仿163填写邮件地址自动显示下拉(无优化)
js判断对象是否是某一类型
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
js 目录列举函数
js颜色选择器代码[firefox不支持]
js wmp操作代码小结(音乐连播功能)

Javascript 中的 不错的文字特效,逐字变色效果


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 253 ::
收藏到网摘: n/a

<font color="#669900" style="font-weight:bolder;letter-spacing: 2px;"><script language="JavaScript">
text = "www.ruanchen.com";
color1 = "green";
color2 = "red";
speed = 200;
i = 0;
if (navigator.appName == "Netscape") {
}
else {
document.write("<span id=a></span>");
}
function changeCharColor() {
if (navigator.appName == "Netscape") {
document.a.document.write("<font color=" + color1 + ">");
for (var j = 0; j < text.length; j++) {
if(j == i) {
document.a.document.write("<font color=" + color2 + ">" + Text.charAt(i) + "</font>");
}
else {
document.a.document.write(text.charAt(j));
}
}
document.a.document.write('</font>');
document.a.document.close();
}
if (navigator.appName == "Microsoft Internet Explorer") {
str = "<font color=" + color1 + ">";
for (var j = 0; j < text.length; j++) {
if( j == i) {
str += "<font color=" + color2 + ">" + text.charAt(i) + "</font>";
}
else {
str += text.charAt(j);
}
}
str += "</font>";
a.innerHTML = str;
}
(i == text.length) ? i=0 : i++;
}
setInterval("changeCharColor()", speed);
// End -->
</script>
</font>
运行效果
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]