淡入、淡出效果

来源:互联网 发布:涤星洗衣设备如何编程 编辑:程序博客网 时间:2024/04/30 15:57
<script type="text/javascript"><!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
<script type="text/javascript"><!--google_ad_client = "pub-2947489232296736";/* 160x600, 创建于 08-4-23MSDN */google_ad_slot = "4367022601";google_ad_width = 160;google_ad_height = 600;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
这个东西存在已有一段时间了,但当它首次亮相时,引起的可不只一连串的惊叹声。为了不使它的光芒褪色,我们在此教你如何让你的网页在下载时,由某一色渐变至另一色。 
做起来挺容易的,不过你应该会想要建立一套自己的色彩计划吧。 

步骤一 
将底下的JavaScript程序代码贴至网页的页首。

<SCRIPT LANGUAGE="JavaScript">
<!--

function makearray(n) {
    this.length = n;
    for(var i = 1; i <= n; i++)
        this[i] = 0;
    return this;
}

hexa = new makearray(16);
for(var i = 0; i < 10; i++) hexa[i] = i;
hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";

function hex(i) {
    if (i < 0)
        return "00";
    else if (i > 255)
        return "ff";
    else
        return "" + hexa[Math.floor(i/16)] + hexa[i%16];
}

function setbgColor(r, g, b) {
    var hr = hex(r); var hg = hex(g); var hb = hex(b);
    document.bgColor = "#"+hr+hg+hb;
}

function fade(sr, sg, sb, er, eg, eb, step) {
    for(var i = 0; i <= step; i++) {
        setbgColor(
        Math.floor(sr * ((step-i)/step)  + er * (i/step)),
        Math.floor(sg * ((step-i)/step) +  eg * (i/step)),
        Math.floor(sb * ((step-i)/step) +  eb * (i/step)));
         }
}

fade(0,0,0,255,255,255,150);

// -->
</SCRIPT>

步骤二 
要创造属于你自己的色彩计划,只要把最后一行的Script改掉即可: 


fade(0,0,0,255,255,255,150);


玩玩这七种颜色吧。开头的前三个数值,分别是指红、绿和蓝的RGB值;接下来的三个数字则是指网页完成下载时的RGB值。最后一个数字代表从开始载入到最后完成载入之间,颜色的渐变转换次数。数字值越高,渐变的层次越多、渐变的速度愈慢。所以目前的数值是显示这个网页从黑色(0,0,0)到白色(255,255,255),中间经过了150个渐变。 <script type="text/javascript"><!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
<script type="text/javascript"><!--google_ad_client = "pub-2947489232296736";/* 160x600, 创建于 08-4-23MSDN */google_ad_slot = "4367022601";google_ad_width = 160;google_ad_height = 600;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>