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

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

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="http://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

网页彩虹文字效果 Neon

动态效果见这里。这里不再介绍其制作方法了,有兴趣的请移步查看原作者文章©

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

雁过留声,人过留名

您的电子邮箱地址不会被公开。 必填项已用 * 标注

特别提示:与当前文章主题无关的讨论相关但需要较多讨论求助信息请发布到水景一页讨论区的相应版块,谢谢您的理解与合作!请参考本站互助指南
您可以在评论中使用如下的 HTML 标记来辅助表达: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>