栏目导航
热门教程
相关教程
星星状的背景特效 [收藏本页]
  • 作者：佚名 来源：本站整理 发布时间：2006-7-8 8:17:21

  • 要完成此效果需要两个步骤

    第一步：把如下代码加入到<head>区域中

    <style type="text/css">

    .star {

    position:absolute;

    layer-background-color:white;

    visibility:visible;

    top:-50px;

    width:50px;

    height:50px;

    font-size:1px;

    background-color:white;

    }

    </style>

    <SCRIPT LANGUAGE="JavaScript">

    <!-- Begin

    var starnum = 175; // Number of stars

    var isNS = (document.layers);

    var _all = (isNS)? '' : 'all.';

    var _style = (isNS) ? '' : '.style';

    var xoffset, yoffset, w_x, w_y, tmpx, tmpy, scrlx, scrly;

    function getstartpos(obj) {

    obj.deltay = Math.floor(Math.random() * 12);

    obj.deltax = Math.floor(Math.random() * 12);

    obj.xdir = (Math.floor(Math.random() * 2) == 1) ? '+' : '-';

    obj.ydir = (Math.floor(Math.random() * 2) == 1) ? '+' : '-';

    obj.counter = 1;

    if (isNS) {

    obj.clip.width = 1;

    obj.clip.height = 1;

    obj.moveTo(xoffset+pageXOffset, yoffset+pageYOffset);

    } else {

    obj.width = 1;

    obj.height = 1;

    obj.pixelTop = yoffset+document.body.scrollTop;

    obj.pixelLeft = xoffset+document.body.scrollLeft;

       }

    }

    function movestar(starN) {

    tmpx = starN.deltax*starN.counter+starN.counter;

    tmpy = starN.deltay*starN.counter+starN.counter;

    if (isNS) {

    starN.clip.width = starN.counter / 3;

    starN.clip.height = starN.counter / 3;

    scrlx = pageXOffset;

    scrly = pageYOffset;

    if ((starN.left+tmpx >= w_x+scrlx) || (starN.top+tmpy >= w_y+scrly) || (starN.left-tmpx <= scrlx) || (starN.top-tmpy <= scrly)) {

    getstartpos(starN);

    } else {

    eval('starN.moveBy('+starN.xdir+tmpx+', '+starN.ydir+tmpy+')');

       }

    } else {

    starN.width = starN.counter/3;

    starN.height = starN.counter/3;

    scrlx = document.body.scrollLeft;

    scrly = document.body.scrollTop;

    if ((starN.pixelLeft+tmpx >= w_x+scrlx)||(starN.pixelTop+tmpy >= w_y+scrly) || (starN.pixelLeft-tmpx <= scrlx)||(starN.pixelTop-tmpy <= scrly)) {

    getstartpos(starN);

    } else {

    eval('starN.pixelTop'+starN.ydir+'=tmpy');

    eval('starN.pixelLeft'+starN.xdir+'=tmpx');

       }

    }

    starN.counter++;

    }

    function animate() {

    for(i=1; i <= starnum; i++) {

    movestar(eval('star'+i));

    }

    setTimeout('animate()', 100);

    }

    function findwindowparams() {

    w_x = (isNS) ? window.innerWidth : document.body.clientWidth;

    w_y = (isNS) ? window.innerHeight : document.body.clientHeight;

    xoffset = w_x / 2;

    yoffset = w_y / 2;

    for (i = 1; i <= starnum; i++) {

    getstartpos(eval('star'+i));

       }

    }

    function resizeNS() {

    setTimeout('document.location.reload()', 400);

    }

    (isNS) ? window.onresize = resizeNS : window.onresize = findwindowparams;

    window.onload = new Function("findwindowparams(); animate();");

    //  End -->

    </script>


    第二步：把如下代码加入到<body>区域中

    <SCRIPT LANGUAGE="JavaScript">

    <!-- Begin

    for (i = 1; i <= starnum; i++) {

    document.writeln('<div id="star'+i+'" class="star"></div>');

    eval('var star'+i+'=document.'+_all+'star'+i+_style);

    }

    // End -->

    </script>

     

     

     


  • [] [返回上一页] [打 印] [收 藏]
  • 上一篇教程：点击色彩变化按钮来变化网页背景颜色 下一篇教程：网页中加入下雨的效果背景特效
Copyright © 2003-2008 站长助手 www.web162.com
辽ICP备05001760号 网络实名:站长助手 转载本站原创教程请注名来源于本站
力倡站长资源文化,崇尚互联共享,做中国最好站长网站,为中国网站提供动力！
始建于2003-3-1 8:10 中国首都·北京 辽宁(分站)
主资源渠道辽宁电信分公司服务器组及带宽！