码迷,mamicode.com
首页 > Web开发 > 详细

Js文字特效—文字段逐个变色循环

时间:2016-02-24 22:50:13      阅读:232      评论:0      收藏:0      [点我收藏+]

标签:

  自己用来练习的,附上详细注释,如果有和我一样喜欢并想要学习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文字特效—文字段逐个变色循环

标签:

原文地址:http://www.cnblogs.com/zhu-xingyu/p/5215312.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!