• [ x0429.COM 电 脑 知 识 学 习 网 ]
  • RSS订阅
  • 网站地图
  • 搜索: 您的位置电脑基础知识网>网站素材>阅读资讯文章

    礼花背景特效(一个非常经典的网页背景特效)

    2008-05-19 10:16:10 来源:网络其他网站 作者:采集 点击: 评论:0
    脚本说明:
    把如下代码加入%26lt;body%26gt;区域中
    %26lt;layer name=%26quot;a0%26quot; left=10 top=10 visibility=show bgcolor=%26quot;#ffffff%26quot; clip=%26quot;0,0,1,1%26quot;%26gt;%26lt;/layer%26gt;
    %26lt;layer name=%26quot;a1%26quot; left=10 top=10 visibility=show bgcolor=%26quot;#fff000%26quot; clip=%26quot;0,0,1,1%26quot;%26gt;%26lt;/layer%26gt;
    %26lt;layer name=%26quot;a2%26quot; left=10 top=10 visibility=show bgcolor=%26quot;#ffa000%26quot; clip=%26quot;0,0,1,1%26quot;%26gt;%26lt;/layer%26gt;
    %26lt;layer name=%26quot;a3%26quot; left=10 top=10 visibility=show bgcolor=%26quot;#ff00ff%26quot; clip=%26quot;0,0,1,1%26quot;%26gt;%26lt;/layer%26gt;
    %26lt;layer name=%26quot;a4%26quot; left=10 top=10 visibility=show bgcolor=%26quot;#00ff00%26quot; clip=%26quot;0,0,1,1%26quot;%26gt;%26lt;/layer%26gt;
    %26lt;layer name=%26quot;a5%26quot; left=10 top=10 visibility=show bgcolor=%26quot;#ff00ff%26quot; clip=%26quot;0,0,1,1%26quot;%26gt;%26lt;/layer%26gt;
    %26lt;layer name=%26quot;a6%26quot; left=10 top=10 visibility=show bgcolor=%26quot;#ff0000%26quot; clip=%26quot;0,0,1,1%26quot;%26gt;%26lt;/layer%26gt;
    %26lt;layer name=%26quot;a7%26quot; left=10 top=10 visibility=show bgcolor=%26quot;#ffffff%26quot; clip=%26quot;0,0,1,1%26quot;%26gt;%26lt;/layer%26gt;
    %26lt;layer name=%26quot;a8%26quot; left=10 top=10 visibility=show bgcolor=%26quot;#fff000%26quot; clip=%26quot;0,0,1,1%26quot;%26gt;%26lt;/layer%26gt;
    %26lt;layer name=%26quot;a9%26quot; left=10 top=10 visibility=show bgcolor=%26quot;#ffa000%26quot; clip=%26quot;0,0,1,1%26quot;%26gt;%26lt;/layer%26gt;
    %26lt;layer name=%26quot;a10%26quot; left=10 top=10 visibility=show bgcolor=%26quot;#ff00ff%26quot; clip=%26quot;0,0,1,1%26quot;%26gt;%26lt;/layer%26gt;
    %26lt;layer name=%26quot;a11%26quot; left=10 top=10 visibility=show bgcolor=%26quot;#00ff00%26quot; clip=%26quot;0,0,2,2%26quot;%26gt;%26lt;/layer%26gt;
    %26lt;layer name=%26quot;a12%26quot; left=10 top=10 visibility=show bgcolor=%26quot;#0000ff%26quot; clip=%26quot;0,0,2,2%26quot;%26gt;%26lt;/layer%26gt;
    %26lt;layer name=%26quot;a13%26quot; left=10 top=10 visibility=show bgcolor=%26quot;#ff0000%26quot; clip=%26quot;0,0,2,2%26quot;%26gt;%26lt;/layer%26gt;
    %26lt;div id=%26quot;starsDiv%26quot; style=%26quot;position:absolute;top:0px;left:0px%26quot;%26gt;
    %26lt;div style=%26quot;position:relative;width:2px;height:2px;background:#ffffff;font-size:2px%26quot;%26gt;%26lt;/div%26gt;
    %26lt;div style=%26quot;position:relative;width:1px;height:1px;background:#fff000;font-size:1px%26quot;%26gt;%26lt;/div%26gt;
    %26lt;div style=%26quot;position:relative;width:1px;height:1px;background:#ffa000;font-size:1px%26quot;%26gt;%26lt;/div%26gt;
    %26lt;div style=%26quot;position:relative;width:1px;height:1px;background:#ff00ff;font-size:1px%26quot;%26gt;%26lt;/div%26gt;
    %26lt;div style=%26quot;position:relative;width:1px;height:1px;background:#00ff00;font-size:1px%26quot;%26gt;%26lt;/div%26gt;
    %26lt;div style=%26quot;position:relative;width:1px;height:1px;background:#0000ff;font-size:1px%26quot;%26gt;%26lt;/div%26gt;
    %26lt;div style=%26quot;position:relative;width:1px;height:1px;background:#FF0000;font-size:1px%26quot;%26gt;%26lt;/div%26gt;
    %26lt;div style=%26quot;position:relative;width:1px;height:1px;background:#ffffff;font-size:1px%26quot;%26gt;%26lt;/div%26gt;
    %26lt;div style=%26quot;position:relative;width:1px;height:1px;background:#fff000;font-size:1px%26quot;%26gt;%26lt;/div%26gt;
    %26lt;div style=%26quot;position:relative;width:1px;height:1px;background:#ffa000;font-size:1px%26quot;%26gt;%26lt;/div%26gt;
    %26lt;div style=%26quot;position:relative;width:1px;height:1px;background:#ff00ff;font-size:1px%26quot;%26gt;%26lt;/div%26gt;
    %26lt;div style=%26quot;position:relative;width:2px;height:2px;background:#ff00ff;font-size:2px%26quot;%26gt;%26lt;/div%26gt;
    %26lt;div style=%26quot;position:relative;width:1px;height:1px;background:#0000ff;font-size:1px%26quot;%26gt;%26lt;/div%26gt;
    %26lt;div style=%26quot;position:r

    elative;width:1px;height:1px;background:#FF0000;font-size:1px%26quot;%26gt;%26lt;/div%26gt;
    %26lt;/div%26gt;

    %26lt;SCRIPT LANGUAGE=%26quot;JavaScript%26quot;%26gt;

    %26lt;!-- Begin
    var Clrs = new Array(9);
    Clrs[0] = 'ff0000';
    Clrs[1] = '00ff00';
    Clrs[2] = '000aff';
    Clrs[3] = 'ff00ff';
    Clrs[4] = 'ffa500';
    Clrs[5] = 'ffff00';
    Clrs[6] = '00ff00';
    Clrs[7] = 'ffffff';
    Clrs[8] = 'fffff0';
    var sClrs = new Array(5);
    sClrs[0] = 'ffa500';
    sClrs[1] = '55ff66';
    sClrs[2] = 'AC9DFC';
    sClrs[3] = 'fff000';
    sClrs[4] = 'fffff0';
    var yBase;
    var xBase;
    var step;
    var currStep = 0;
    var Xpos = 1;
    var Ypos = 1;
    var initialStarColor = 'ffa000';
    var Mtop = 250;
    var Mleft = 250;
    function Fireworks() {
    if (document.all) {
    yBase = window.document.body.offsetHeight / 3;
    xBase = window.document.body.offsetWidth / 8;
    }
    else if (document.layers) {
    yBase = window.innerHeight / 3;
    xBase = window.innerWidth / 8;
    }
    if (document.all) {
    step = 5;
    for ( i = 0 ; i %26lt; starsDiv.all.length ; i++ ) {
    for (ai = 0; ai %26lt; Clrs.length; ai++) {
    var c = Math.round(Math.random()*[ai]);
    }
    if (currStep %26lt; 90)
    starsDiv.all[i].style.background=initialStarColor;
    if (currStep %26gt; 90)
    starsDiv.all[i].style.background=Clrs[c];
    starsDiv.all[i].style.top = Mtop + yBase*Math.sin((currStep+i*5)/3)*Math.sin(550+currStep/100)
    starsDiv.all[i].style.left = Mleft + yBase*Math.cos((currStep+i*5)/3)*Math.sin(550+currStep/100)
    }
    }
    else if (document.layers) {
    step = 5;
    for ( j = 0 ; j %26lt; 24 ; j++ ) { //number of NS layers!
    var templayer = %26quot;a%26quot;+j;
    for (ai = 0; ai %26lt; Clrs.length; ai++) {
    var c = Math.round(Math.random()*[ai]);
    }
    if (currStep %26lt; 90)
    document.layers[templayer].bgColor=initialStarColor;
    if (currStep %26gt; 90)
    document.layers[templayer].bgColor=Clrs[c];
    document.layers[templayer].top = Mtop + yBase*Math.sin((currStep+j*5)/3)*Math.sin(550+currStep/100)
    document.layers[templayer].left = Mleft + yBase*Math.cos((currStep+j*5)/3)*Math.sin(550+currStep/100)
    }
    }
    currStep+= step;
    T=setTimeout(%26quot;Fireworks()%26quot;,5);
    if (currStep == 220) {
    currStep = -10;
    for (n = 0; n %26lt; sClrs.length; n++) {
    var k = Math.round(Math.random()*n);
    }
    initialStarColor = sClrs[k];
    if (document.all) {
    Dtop = window.document.body.clientHeight - 250;
    Dleft = xBase * 3.5;
    Mtop = Math.round(Math.random()*Dtop);
    Mleft = Math.round(Math.random()*Dleft);
    document.all.starsDiv.style.top = Mtop+document.body.scrollTop;
    document.all.starsDiv.style.left = Mleft+document.body.scrollLeft;
    }
    else if (document.layers) {
    Dleft = window.innerWidth - 100;
    Dtop = window.innerHeight - 100;
    Mtop = Math.round(Math.random()*Dtop+window.pageYOffset);
    Mleft = Math.round(Math.random()*Dleft+window.pageXOffset);
    document.layers[templayer].top = Mtop;
    document.layers[templayer].left = Mleft;

    %26gt;if ((Mtop %26lt; 20) || (Mleft %26lt; 20)) {
    Mtop += 90;
    Mleft += 90;
    }
    }
    }
    Fireworks();
    // End --%26gt;
    %26lt;/script%26gt;

    Tags:[标签:标签]  
    责任编辑:
  • 请文明参与讨论,禁止漫骂攻击。 用户名:新注册) 密码: 匿名:
    评论总数:0 [ 查看全部 ] 网友评论