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

    ZEALER是我非常喜欢的一个测评网站,经常访问看看手机.电动牙刷及机械键盘的测试视频,非常欣赏王自如的数据化测评理念.敬畏之心,以及不祛痘的视频. 刚好最近对网络视频应用比较感兴趣,觉得ZEALER ...

  2. C#部分的总结

    经过本次考试暴露出一些问题,面对一些概念性和文字性的基础知识,仍然不够细心,出现各种不应该的错误, 虽然平时学习中,实际操作写代码比较顺利,但基础知识和概念仍不可少,这在将来面试上也是重要的一部分.在 ...

  3. 【前台 submit的重复提交 错误】submit的重复提交

    错误表现: 会表现出来:ajax执行成功但是时而会进回调函数,时而不会进入回调函数. 分析原因: 页面的表达提交使用submit,然后又对这个提交按钮绑定一个点击事件,使用ajax来和后台进行交互,这 ...

  4. Tomcat环境配置部署测试环境及架构

    Tomcat环境配置已经在前面介绍过了,这边就为童鞋们介绍下对于Tomcat的架构是怎么样的! Tomcat的架构包含(bin.conf.lib.logs.temp.wenapps.work)等文件夹 ...

  5. LoadRunner检查点

    web_reg_find("Text=ABC", "SaveCount=abc_count", LAST);51Testing软件测试网V?2Rs.J Gmdw ...

  6. JavaScrip入门（3）

    函数: var m2=function(){ console.log('2222'); } console.log(typeof(m2)); 输出结果:test.html:31 function js ...

  7. java中HashMap详解

    HashMap 和 HashSet 是 Java Collection Framework 的两个重要成员,其中 HashMap 是 Map 接口的常用实现类,HashSet 是 Set 接口的常用实 ...

  8. shell-bash学习01基础、打印、环境变量

    基础 终端提示符: username@hostname$; $: 一般用户 #:root用户 运行脚本 Bash执行: * bash script.sh; 直接运行: 脚本开头添加shebang起始: ...

  9. 使用GDB 修改MySQL参数不重启

    link:http://blog.chinaunix.net/uid-20785090-id-4016315.html mysql很多参数都需要重启才能生效,有时候条件不允许,可以使用gdb作为最后的 ...

  10. [Noi2015]软件包管理器 题解

    题目大意: 有n个软件安装包,除第一个以外,其他的要在另一个安装包的基础上安装,且无环,问在安装和卸载某个软件包时,这个操作实际上会改变多少个软件包的安装状态. 思路: 可构成树,用树链剖分,线段树. ...