自己用来练习的，附上详细注释,如果有和我一样喜欢并想要学习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

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. rsync+inotify实现实时同步案例--转

    转自:http://chocolee.blog.51cto.com/8158455/1400596 随着应用系统规模的不断扩大,对数据的安全性和可靠性也提出的更好的要求,rsync在高端业务系统中也逐 ...

  2. python操作excel表格(xlrd/xlwt)

    最近遇到一个情景,就是定期生成并发送服务器使用情况报表,按照不同维度统计,涉及python对excel的操作,上网搜罗了一番,大多大同小异,而且不太能满足需求,不过经过一番对源码的"研究&q ...

  3. Android Studio导出Jar包并混淆

    在Android Studio中,自带反编译查看class文件,如果没有混淆的话,class文件跟java文件基本没有区别了,为了保护,还是混淆的好. 网上看了不少资料,都是直接下载proguard额 ...

  4. DSP using MATLAB示例Example3.6

    代码: n = [-5:5]; x = (-0.9).^n; % x(n) = k = -200:200; w = (pi/100)*k; % [0,pi] axis divided into 101 ...

  5. [自动运维]weblogic自动发布

    近期一个项目属于测试过渡期,bug修复比较频繁,每次都会伴随着项目的打包.上传.发布,此类重复操作近乎每天都会进行,刚好最近在看python相关资料,决定重新将此前学习的weblogic的wlst相关 ...

  6. C#资源文件与与资源名称字符串之间的互相转化

    1.使用ResourceManager string st = Properties.Resources.ResourceManager.GetString(tableName);value = Pr ...

  7. 优化WPF 3D性能

    Maximize WPF 3D Performance .NET Framework 4.5   As you use the Windows Presentation Foundation (WPF ...

  8. 斑点检测(LoG,DoG)(下)

    斑点检测(LoG,DoG)(下) LoG, DoG, 尺度归一化 上篇文章斑点检测(LoG,DoG)(上)介绍了基于二阶导数过零点的边缘检测方法,现在我们要探讨的是斑点检测.在边缘检测中,寻找的是二阶 ...

  9. iOS学习14之OC NSNumber + NSValue

    1.NSNumber 数值类. 作用:实现基本数据类型与OC对象类型的相互转化. 1> NSNumber创建对象 // 初始化方法 NSNumber *num1 = [[NSNumber all ...

  10. 洛谷 P1803 凌乱的yyy Label:Water 贪心

    题目背景 快noip了,yyy很紧张! 题目描述 现在各大oj上有n个比赛,每个比赛的开始.结束的时间点是知道的. yyy认为,参加越多的比赛,noip就能考的越好(假的) 所以,他想知道他最多能参加 ...