自己用来练习的，附上详细注释,如果有和我一样喜欢并想要学习Dom特效创作的朋友，推荐先系统了解Javascript中Html Dom Object部分的内容，包括常用方法及属性。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>文字段逐个变色循环特效</title>
  6. </head>
  7. <body>
  8.  
  9.     <a href="#" style="text-decoration:none">
  10.     <script type="text/javascript">
  11.        //判断是否为IE浏览器,这一步可以不要
  12.         function isIe(){
  13.             return ("ActiveXObject" in window);
  14.        }
  15.            //全局变量
  16.         var words="请点我这里！";
  17.         var  n=0;
  18.         var flashing;
  19.         var temp=[];
  20.  
  21.           document.write('<B><font size="12px" color="red">');    //输出html元素标签等内容
  22.           //依次改变words的格式
  23.           for(index=0;index<words.length;index++){  //将字符串拆分成字符单位处理
  24.  
  25.             document.write('<span  id="neonLight" style="font-family:Verdana,Arial;font-size:18px;">'+words.charAt(index)+' </span>');
  26.          }
  27.  
  28.             document.write("</font></B>");   //输出html元素标签内容
  29.             temp=document.getElementsByTagName("span");
  30.  
  31.       //逐渐变色
  32.       function neon(){
  33.                //起始为红色
  34.             if(n==0){
  35.                 for(i=0;i<temp.length;i++){
  36.                     temp[i].style.color="red";
  37.                 }
  38.               }
  39.  
  40.                //依次变为蓝色
  41.            if(n<temp.length){
  42.                 temp[n].style.color="blue";
  43.                 n++;
  44.                }else{  //变完回到初始状态
  45.                 n=0;
  46.              }
  47.           } 
  48.  
  49.                 //启动函数
  50.        function beginNeon(){
  51.            flashing=setInterval("neon()",1500 ); //每隔1.5秒启动
  52.                }
  53.        beginNeon();
  54.            </script></a>
  55.      </body>
  56. </html>

这里在推荐一个介绍JS知识体系结构十分给力的站点，可以当平时的参考工具表  —http://dreamdesign.csrjgzs.com/Article/ShowArticle.asp?/4032-1.html

Js文字特效—文字段逐个变色循环的更多相关文章

  1. 7款震撼人心的HTML5CSS3文字特效

    1.HTML5像素文字爆炸重组动画特效 今天我们要分享一款基于HTML5技术的文字像素爆炸重组动画特效,我们可以在输入框中指定任意文字,点击确定按钮后,就会将原先的文字爆炸散去,新的文字以像素点的形式 ...

  2. 7款震撼人心的HTML5文字特效

    1.CSS3五彩文字特效 文字带阴影效果 这是一款非常具有卡通形象的CSS3五彩文字特效,虽然没有迷人的动画效果,但是五彩缤纷的文字展现在屏幕上也是非常酷的,再加上每一个文字都有不同角度的阴影效果,加 ...

  3. HTML5/CSS3(PrefixFree.js) 3D文字特效

    之前在园子里看到一个HTML5/CSS3的文字特效(这里),觉得挺好玩的所以小小的研究了下,不过发现代码都是针对webkit以及FF的所以IE跪了. Runjs 我将示例中的代码进行了精简,后来发现C ...

  4. 18款js和jquery文字特效代码分享

    18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...

  5. JS文字特效：彩色滚动变幻效果，只适合少量的文字。（过多对页面有影响）

    JS代码如下: 代码具体是在哪里的我不知道但是我的有道云上有.如有哪位朋友知道,还望联系下,添加出处. <div id="chakhsu"></div> & ...

  6. HTML5火焰文字特效DEMO演示

    效果展示:http://hovertree.com/texiao/html5/26/ 效果图: 扫描二维码查看效果:

  7. HTML5火焰文字特效DEMO演示---转载

    只有google支持 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  8. CSS3火焰文字特效制作教程

    原文:CSS3火焰文字特效制作教程 用一句很俗气的话概括这两天的情况就是:“最近很忙”,虽然手头上有不少很酷的HTML5和CSS3资源,但确实没时间将它们的实现过程写成教程分享给大家.今天刚完成了一个 ...

  9. PS软件操作应用—文字特效

      前  言 JRedu 在图像调整和文字工具的分享文章中,对文字工具做了简单的介绍,包括了文字的字体.字号大小.颜色以及字间距行距等等的设置和修改,都是一些基本的功能,在这次的分享中我们介绍下文字特 ...

随机推荐

  1. loj 1316(spfa预处理+状压dp)

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=27024 题意:求0-(n-1)的经过最多的标记的点的最短路. 思路 ...

  2. WEB前端知识体系脑图

    说在开始的话: 我上大学那会,虽说主要是学Java语言,但是web前端也稍微学了一些,那时候对前端也没多在意,因为涉入的不深,可以搞一个差不多可以看的界面就可以了,其他也没过多在意. 因为稍微了解一点 ...

  3. 简单的c#插件框架

    插件式架构,一种全新的.开放性的.高扩展性的架构体系.插件式架构设计近年来非常流行,基于插件的设计好处很多,把扩展功能从框架中剥离出来,降低了框架的复杂度,让框架更容易实现.扩展功能与框架以一种很松的 ...

  4. 廖雪峰js教程笔记3

    JavaScript的函数在查找变量时从自身函数定义开始,从"内"向"外"查找.如果内部函数定义了与外部函数重名的变量,则内部函数的变量将"屏蔽&qu ...

  5. SpringMVC解析2-ContextLoaderListener

    对于SpringMVC功能实现的分析,我们首先从web.xml开始,在web.xml文件中我们首先配置的就是ContextLoaderListener,那么它所提供了功能有哪些又是如何实现的?当使用编 ...

  6. 宫格布局实例（注意jquery的版本号要统一）2

    <!DOCTYPE html><html><head><meta charset="utf-8" /><style> * ...

  7. POJ 1159 回文串-LCS

    题目链接:http://poj.org/problem?id=1159 题意:给定一个长度为N的字符串.问你最少要添加多少个字符才能使它变成回文串. 思路:最少要添加的字符个数=原串长度-原串最长回文 ...

  8. git 基础使用

    1: 安装客户端 2: 注册使用github 3: 具体操作 3-1: 右键打开:git bash here 执行 ssh-keygen -t rsa -C "youremail@examp ...

  9. 伪Acmer的推理(dfs/bfs)

    时间限制:1000MS  内存限制:65535K 提交次数:12 通过次数:9 收入:32 题型: 编程题   语言: C++;C Description 现在正是期末,在复习离散数学的Acmer遇到 ...

  10. 遍历table指定name的td

    $("td[name='rates']").each(function () { var temp = $(this).text().substr(0,$(this).text() ...