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

时间: 2025-01-17 02:00:36

Js文字特效—文字段逐个变色循环的相关文章

7款震撼人心的HTML5CSS3文字特效

1.HTML5像素文字爆炸重组动画特效 今天我们要分享一款基于HTML5技术的文字像素爆炸重组动画特效,我们可以在输入框中指定任意文字,点击确定按钮后,就会将原先的文字爆炸散去,新的文字以像素点的形式组合起来,看起来非常棒. 在线演示 源码下载 2.HTML5/CSS3 3D文字特效 文字外翻效果 今天我们再来分享一款很酷的HTML5/CSS3 3D文字特效,该文字特效的效果是鼠标滑过文字就会出现3D外翻的效果,非常不错的一款文字特效. 在线演示 源码下载 3.HTML5/CSS3发光文字 可自

7款震撼人心的HTML5文字特效

1.CSS3五彩文字特效 文字带阴影效果 这是一款非常具有卡通形象的CSS3五彩文字特效,虽然没有迷人的动画效果,但是五彩缤纷的文字展现在屏幕上也是非常酷的,再加上每一个文字都有不同角度的阴影效果,加上漂亮的英文字体,让整一个文字特效显得非常出色迷人,大家可以在宣传广告页面试试这款CSS3文字特效. 在线演示 源码下载 2.HTML5/CSS3 Loading动画 水位充满文字特效 这款HTML5动画既是Loading特效也是文字特效,Loading动画开始时,文字中的水位渐渐上升,为了模拟水位

18款js和jquery文字特效代码分享

jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形球状的3D云标签动画效果 原生js tagscloud文字标签云仿快播文字标签云上下滚动出现 jquery文字跳舞鼠标滑过段落文字波浪线条跳动 jquery lettering书写中文彩色文字_html彩色文字特效 jquery 文字特效霓虹灯文字效果使用jQuery和CSS jquery文字动画插件制作文字flash动画滤镜效果切换特效

PS软件操作应用—文字特效

  前  言 JRedu 在图像调整和文字工具的分享文章中,对文字工具做了简单的介绍,包括了文字的字体.字号大小.颜色以及字间距行距等等的设置和修改,都是一些基本的功能,在这次的分享中我们介绍下文字特效,掌握文字基本功能的前提下,再结合PS里的其他工具来完成文字的特效效果. 文字在设计中有着举足轻重的地位,不管是传统平面设计,还是互联网时代,我们都会通过使用文字来传达一定的信息,在使用基本文字的同时,特效文字也让大家普遍运用,不仅仅传递了信息,还具备了一定的视觉感! 在这里我们就通过两个简单的案

jQuery绚丽霓虹灯文字特效

novacancy.js是一款非常有意思的.效果绚丽的jQuery绚丽霓虹灯文字特效插件.该文字特效插件可以将任意文本转换为霓虹灯效果,你可以设置灯光的颜色,发光的颜色,几个文字是不亮灯状态,以及灯光闪烁的频率等等. 效果演示:http://www.htmleaf.com/Demo/201504111662.html 下载地址:http://www.htmleaf.com/jQuery/Text-Link-Effects/201504111661.html

HTML5火焰文字特效DEMO演示---转载

只有google支持 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5火焰文字特效DEMO演示 - 何问起</title> <style> html, body { margin: 0px; width: 100%; height: 100%; overflow: hidden; background-color: #00

纯CSS3创意loading文字特效

快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App,并销售到苹果应用商店中. <HTML开发Mac OS App 视频教程> 土豆网同步更新:http://www.tudou.com/plcover/VHNh6ZopQ4E/ 百度网盘同步:http://pan.baidu.com/s/1jG1Q58M 分享  [中文纪录片]互联网时代   http://pan.baidu.com/s/1qWkJfcS 官方QQ群:(申请加入,说是我推荐的) App实践出真知 4

鼠标点击网页出现文字特效

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

测开之路一百零一:jquery文字特效、动画、方法链

文字特效 html内容 1.卷起/展开 2.隐藏/显示 3.淡入淡出 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--<script src="../js/jquery-3.4.1.min.js"></script>--&g