zoukankan      html  css  js  c++  java
  • Js文字特效—文字段逐个变色循环

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

  • 相关阅读:
    SecureCRT + Tmux 分屏 高效开发
    Python—基础之杂货铺
    Python—五大基本语句
    Python—运算符的类型
    Python—基本数据类型
    Python—变量详解
    Python—虚拟环境的创建与管理(virtualenv与virtualenvwrapper)
    Mysql—数据库管理与表管理
    Linux—服务器SSL/TLS快速检测工具(TLSSLed)
    Linux—yum使用详解
  • 原文地址:https://www.cnblogs.com/zhu-xingyu/p/5215312.html
Copyright © 2011-2022 走看看