自己用来练习的,附上详细注释,如果有和我一样喜欢并想要学习Dom特效创作的朋友,推荐先系统了解Javascript中Html Dom Object部分的内容,包括常用方法及属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字段逐个变色循环特效</title>
</head>
<body> <a href="#" style="text-decoration:none">
<script type="text/javascript">
//判断是否为IE浏览器,这一步可以不要
function isIe(){
return ("ActiveXObject" in window);
}
//全局变量
var words="请点我这里!";
var n=0;
var flashing;
var temp=[]; document.write('<B><font size="12px" color="red">'); //输出html元素标签等内容
//依次改变words的格式
for(index=0;index<words.length;index++){ //将字符串拆分成字符单位处理 document.write('<span id="neonLight" style="font-family:Verdana,Arial;font-size:18px;">'+words.charAt(index)+' </span>');
} document.write("</font></B>"); //输出html元素标签内容
temp=document.getElementsByTagName("span"); //逐渐变色
function neon(){
//起始为红色
if(n==0){
for(i=0;i<temp.length;i++){
temp[i].style.color="red";
}
} //依次变为蓝色
if(n<temp.length){
temp[n].style.color="blue";
n++;
}else{ //变完回到初始状态
n=0;
}
} //启动函数
function beginNeon(){
flashing=setInterval("neon()",1500 ); //每隔1.5秒启动
}
beginNeon();
</script></a>
</body>
</html>
这里在推荐一个介绍JS知识体系结构十分给力的站点,可以当平时的参考工具表 —http://dreamdesign.csrjgzs.com/Article/ShowArticle.asp?/4032-1.html