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

    linux查看java jdk安装路径和设置环境变量 windows: set java_home:查看JDK安装路径 java -version:查看JDK版本 linux: whereis jav ...

  2. loadrunner参数化excel数据

    LR参数化数据源Oracle,MSSQL,Excel参数化的方法: 重点介绍excel数据参数化的方法: 1.首先创建excel表格: 注意要写列明   2.创建excel表连接:   参数化完成后, ...

  3. ASP.NET中Url编码解码

    今天遇到Url编码解码的问题,纠结了一天的时间,结果上网一查才发现太二了我们. 同事写的代码把url用HttpUtility.UrlEncode编码和解码了,本地测试没有问题,部署到服务器上就提示转码 ...

  4. DSP using MATLAB 示例Example3.4

    代码: n = [-1:3]; x = [1:5]; % x(n) = {1,2,3,4,5} % * % k = 0:500; w = (pi/500)*k; % [0,pi] axis divid ...

  5. SU suxcontour命令学习

  6. Swift3.0语言教程字符串与文件的数据转换

    Swift3.0语言教程字符串与文件的数据转换 Swift3.0语言教程字符串与文件的数据转换,如果想要对字符串中的字符进行永久保存,可以将字符串中的字符写入到文件中.当然,开发者也可以将写入的内容进 ...

  7. Silverlight

    http://kb.cnblogs.com/zt/silverlight/ http://www.cnblogs.com/gnielee/archive/2010/01/15/silverlight- ...

  8. 4D时间管理

    时间管理的4D原则   时间矩阵:每个人,每天要做的事情大致分为四类:一类:必须做的,不做会产生不良后果的二类:需要做的,为将来或者今后阶段做准备工作的三类:可以不做,但又不得不做的,例如通过简约形式 ...

  9. SolrCloud zookeeper节点信息

    shard 节点列表 get /collections/appstore/leaders/shard1 { "core":"appstore", "n ...

  10. nginx负载均衡之基于客户端cookie的会话保持

    通过ip_hash做会话保持有一定的缺陷,这个是通过客户端ip来实现.同一个网络下众多客户端访问服务器会被扔到同一台机器,再或者是CDN也 会导致负载不均衡.所以要实现通过客户端cookie实现,包括 ...