彩虹效果网页文字的 JavaScript 实现

分享两个使用 JavaScript 实现网页文字彩虹效果的代码，让你的文字也如霓虹灯般闪烁吧。

目录 Contents

1. 较炫、较简单
- Javascript 代码
- 调用代码
2. 较含蓄、较复杂

1. 较炫、较简单¶

彩虹变幻文字效果

动态效果见这里顶部的网站标题。

这是从 http://Www.VeryAsp.Net 找到的一个方法，只是根据实际效果做了一点点修改。

Javascript 代码¶

将下面的 JavaScript 代码放在页面中需要应用彩虹字体效果的内容之前。不需要修改其中的内容。

<script type="text/javascript">
<!-- Begin
//more javascript from 

/*
 * Notes on hue
 *
 * This script uses hue rotation in the following manner:
 * hue=0 is red (#FF0000)
 * hue=60 is yellow (#FFFF00)
 * hue=120 is green (#00FF00)
 * hue=180 is cyan (#00FFFF)
 * hue=240 is blue (#0000FF)
 * hue=300 is magenta (#FF00FF)
 * hue=360 is hue=0 (#FF0000)
 *
 * Notes on the script
 *
 * This script should function in any browser that supports document.getElementById
 * It has been tested in Netscape7, Mozilla Firefox 1.0, and Internet Explorer 6
 *
 * Accessibility
 *
 * The script does not write the string out, but rather takes it from an existing
 * HTML element. Therefore, users with javascript disabled will not be adverely affected.
 * They just won't get the pretty colors.
 */

/*
 * splits par.firstChild.data into 1 span for each letter
 * ARGUMENTS
 * span - HTML element containing a text node as the only element
 */
function toSpans(span) {
    var str=span.firstChild.data;
    var a=str.length;
    span.removeChild(span.firstChild);
    for(var i=0; i<a; i++) {
        var theSpan=document.createElement("SPAN");
        theSpan.appendChild(document.createTextNode(str.charAt(i)));
        span.appendChild(theSpan);
    }
}

/*
 * creates a rainbowspan object
 * whose letters will be colored [deg] degrees of hue
 * ARGUMENTS
 * span - HTML element to apply the effect to (text only, no HTML)
 * hue - what degree of hue to start at (0-359)
 * deg - how many hue degrees should be traversed from beginning to end of the string (360 => once around, 720 => twice, etc)
 * brt - brightness (0-255, 0 => black, 255 => full color)
 * spd - how many ms between moveRainbow calls (less => faster)
 * hspd - how many hue degrees to move every time moveRainbow is called (0-359, closer to 180 => faster)
 */
function RainbowSpan(span, hue, deg, brt, spd, hspd) {
    this.deg=(deg==null?360:Math.abs(deg));
    this.hue=(hue==null?0:Math.abs(hue)%360);
    this.hspd=(hspd==null?3:Math.abs(hspd)%360);
    this.length=span.firstChild.data.length;
    this.span=span;
    this.speed=(spd==null?50:Math.abs(spd));
    this.hInc=this.deg/this.length;
    this.brt=(brt==null?255:Math.abs(brt)%256);
    this.timer=null;
    toSpans(span);
    this.moveRainbow();
}

/*
 * sets the colors of the children of [this] as a hue-rotating rainbow starting at this.hue;
 * requires something to manage ch externally
 * I had to make the RainbowSpan class because M$IE wouldn't let me attach this prototype to [Object]
 */
RainbowSpan.prototype.moveRainbow = function() {
    if(this.hue>359) this.hue-=360;
    var color;
    var b=this.brt;
    var a=this.length;
    var h=this.hue;

    for(var i=0; i<a; i++) {
        if(h>359) h-=360;
        if(h<60) { color=Math.floor(((h)/60)*b); red=b;grn=color;blu=0; }
        else if(h<120) { color=Math.floor(((h-60)/60)*b); red=b-color;grn=b;blu=0; }
        else if(h<180) { color=Math.floor(((h-120)/60)*b); red=0;grn=b;blu=color; }
        else if(h<240) { color=Math.floor(((h-180)/60)*b); red=0;grn=b-color;blu=b; }
        else if(h<300) { color=Math.floor(((h-240)/60)*b); red=color;grn=0;blu=b; }
        else { color=Math.floor(((h-300)/60)*b); red=b;grn=0;blu=b-color; }

        h+=this.hInc;

        this.span.childNodes[i].style.color="rgb("+red+", "+grn+", "+blu+")";
    }
    this.hue+=this.hspd;
}
// End -->
</script>

调用代码¶

对于超链接，可以这样应用：

<a href="https://cnzhx.net/" id="r1">这里放上需要彩虹效果的文字</a>

<script type="text/javascript">
   var r1=document.getElementById("r1");
   var myRainbowSpan2=new RainbowSpan(r1, 0, 360, 255, 50, 348);
   myRainbowSpan2.timer=window.setInterval("myRainbowSpan2.moveRainbow()", myRainbowSpan2.speed);
</script>

其中，id=”r1″ 中的 r1 就是用来标记的名称。

需要注意的就是上面这段 JavaScript 代码应该出现在需要渲染的文字之后。所以如果你打算将所有 JavaScript 代码放在页面底部的话，也可以把这一段 JavaScript 与前面那一大段 JavaScript 合并在一起，放到页面底部。如果是这样，最好将两段 JavaScript 代码放到一个文件，比如 colortext.js 中，然后在页面中调用该文件：

<script type="text/javascript" src="./colortext.js"></script>

如果同一页面还有另一个需要渲染成彩虹效果的文字，可以这样应用：

<div id="r2">这里是第二个需要彩虹字体的文字
<script type="text/javascript">
    var r2=document.getElementById("r2"); //get span to apply rainbow
    var myRainbowSpan2=new RainbowSpan(r2, 0, 360, 255, 50, 348); //apply static rainbow effect
    myRainbowSpan2.timer=window.setInterval("myRainbowSpan2.moveRainbow()", myRainbowSpan2.speed);
</script>
</div>

也就是将那个调用标志 r1 改成 r2。当然还可以有 r3、r4 等等。

特别提示：其实很少有人在页面中使用 r2 这样的 HTML ID，按照上面的调用方法还需要修改页面代码，很不方便。比如例子中的网页，因为要渲染网站标题，该标题的 HTML 源代码为：

<h1 class="site-title">洒满阳光的角落</h1>

那么只需要将调用代码中的第一句：

var r1=document.getElementById("r1");

改为，

var r1=document.getElementsByClassName("site-title")[0];

即可。此时就不需要再修改页面源代码了。其它要求不变。

2. 较含蓄、较复杂¶

同时还找到一个国外网站上分享的实现彩虹效果的方法。较含蓄、较柔美，有一种夜晚霓虹灯的变幻效果。但是也很复杂，还使用了 PhotoShop 图片制作和 jQuery 方法。效果如下：

网页彩虹文字效果 Neon

本文发表于水景一页。永久链接：<https://cnzhx.net/blog/text-rainbow-effect-with-javascript/>。转载请保留此信息及相应链接。

水景一页

Haoxian's personal notes.

彩虹效果网页文字的 JavaScript 实现

1. 较炫、较简单¶

Javascript 代码¶

调用代码¶

2. 较含蓄、较复杂¶

相关文章