求类似splash的一个loading的效果~~

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>xyProgressLG xo</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<SCRIPT>
 function xyProgressLG(xyID){
  this.xyProgressID = 'oProgress' + Math.random().toString().substr(2, 10) + xyID;  this.max = 0;
  this.min = 0;
 
  this.width = 100;
  this.height = 20;
  this.currPos = 0;
  this.outerBorderColor = "black";
  this.outerBackColor = "white";
  this.innerBorderColor = "";
  this.innerBackColor = "blue";
  this.TextColor = "red";  this.SetProgressTop = xySetProgressTop;
  this.SetProgressLeft = xySetProgressLeft;
  this.SetProgressWidth = xySetProgressWidth;
  this.SetProgressHeight = xySetProgressHeight;
  this.SetProgressBorderColor = xySetProgressBorderColor;
  this.SetProgressForeBorderColor = xySetProgressForeBorderColor;
  this.SetProgressBackColor = xySetProgressBackColor;
  this.SetProgressForeColor = xySetProgressForeColor;
  this.EnableProgressText = xyEnableProgressText;
  this.SetProgressTextFontSize = xySetProgressTextFontSize;
  this.SetProgressTextFontColor = xySetProgressTextFontColor;
  this.SetProgressTextFontFamily = xySetProgressTextFontFamily;  this.SetProgressMax = xySetProgressMax;
  this.SetProgressMin = xySetProgressMin;
  this.UpdatePosition = xyUpdatePosition;
  this.UpdateToPosition = xyUpdateToPosition;
  this.UpdatePersent = xyUpdatePersent;
  this.UpdateToPersent = xyUpdateToPersent;  xyProgressInit(this.xyProgressID);
  return this.xyProgressID;
 }
 function xyProgressInit(xyID){
  var div = document.createElement("div");
  div.id = xyID;
  div.style.position = "absolute";
  div.style.left = "100px";
  div.style.top = "100px";
  document.body.appendChild(div);  var pro = document.createElement("div");
  pro.style.position = "absolute";
  pro.style.left = "0px";
  pro.style.top = "0px";
  pro.style.fontSize= "0px";
  pro.style.width = "100px";
  pro.style.height = "20px";
  pro.style.border = "1px solid black";
  pro.style.background = "white";
  pro.style.zIndex = "100";
  div.appendChild(pro);  var proInner = document.createElement("div");
  proInner.id = xyID+"_Inner";
  proInner.style.position = "absolute";
  proInner.style.left = "1px";
  proInner.style.top = "1px";
  proInner.style.fontSize= "0px";
  proInner.style.width = "0px";
  proInner.style.height = "16px";
  proInner.style.border = "1px solid black";
  proInner.style.background = "blue";
  pro.style.zIndex = "102";
  pro.appendChild(proInner);  var text = document.createElement("div");
  text.style.position = "absolute";
  text.style.left = "50px";
  text.style.top = "2px";
  text.style.fontSize= "11px";
  text.style.width = "40px";
  text.style.height = "16px";
  text.style.zIndex = "103";
  div.appendChild(text);
 }
 function xySetProgressTop(pStyleTop){
  try{
   var e = document.all(this.xyProgressID);
   e.style.top = pStyleTop;
  }catch(e){
   alert(e.description);
  }
 }
 function xySetProgressLeft(pStyleLeft){
  try{
   var e = document.all(this.xyProgressID);
   e.style.left = pStyleLeft;
  }catch(e){
   alert(e.description);
  }
 }
 function xySetProgressWidth(pWidth){
  try{
   var e = document.all(this.xyProgressID);
   e.style.width = pWidth;
   eOuter = e.children(0);
   eOuter.style.width = pWidth;
   this.width = pWidth;
  }catch(e){
   alert(e.description);
  }
 }
 function xySetProgressHeight(pHeight){
  try{
   var e = document.all(this.xyProgressID);
   e.style.height = pHeight;
   eOuter = e.children(0);
   eInner = e.children(0).children(0);
   eOuter.style.height = pHeight;
   eInner.style.height = pHeight-4;
   this.height = pHeight;
  }catch(e){
   alert(e.description);
  }
 }
 function xySetProgressBorderColor(pColor){
  try{
   var e = document.all(this.xyProgressID);
   e = e.children(0);
   e.style.border = "1px solid "+pColor;
  }catch(e){
   alert(e.description);
  }
 }
 function xySetProgressForeBorderColor(pColor){
  try{
   var e = document.all(this.xyProgressID);
   e = e.children(0).children(0);
   e.style.border = "1px solid "+pColor;
  }catch(e){
   alert(e.description);
  }
 }

解决方案 »

  1.   

    function xySetProgressBackColor(pColor){
      try{
       var e = document.all(this.xyProgressID);
       e = e.children(0);
       e.style.background = pColor;
      }catch(e){
       alert(e.description);
      }
     }
     function xySetProgressForeColor(pColor){
      try{
       var e = document.all(this.xyProgressID);
       e = e.children(0).children(0);
       e.style.background = pColor;
      }catch(e){
       alert(e.description);
      }
     }
     function xyEnableProgressText(bEnable){
      try{
       var e = document.all(this.xyProgressID);
       eText = e.children(1);
       if(bEnable){
        eText.style.display = "none";
       }else{
        eText.style.display = "";
       }
       var pos = e.style.width;
       var sel = eText.style.width;
       pos = (pos-sel)/2;
       eText.style.left = pos;
      }catch(e){
       alert(e.description);
      }
     }
     function xySetProgressTextFontSize(pSize){
      try{
       var e = document.all(this.xyProgressID);
       e = e.children(1);
       e.style.fontSize = pSize;
      }catch(e){
       alert(e.description);
      }
     }
     function xySetProgressTextFontColor(pColor){
      try{
       var e = document.all(this.xyProgressID);
       e = e.children(1);
       e.style.fontColor = pColor;
      }catch(e){
       alert(e.description);
      }
     }
     function xySetProgressTextFontFamily(pFamily){
      try{
       var e = document.all(this.xyProgressID);
       e = e.children(1);
       e.style.fontFamily = pFamily;
      }catch(e){
       alert(e.description);
      }
     }
     function xySetProgressMax(pMax){
      this.max = pMax;
     }
     function xySetProgressMin(pMin){
      this.min = pMin;
     }
     function xyUpdatePosition(pPosition){   /*将progress增长或减小pPosition,其中,0<pPersent<max*/
      try{
       var max = this.max;
       var min = this.min;
       var e = document.all(this.xyProgressID);
       if(pPosition>max){
        return -1;
       }
       var len = this.width;
       var pos = this.currPos+(pPosition/(max-min))*len;
       eProgress = e.children(0).children(0);
       if(pos>=this.width){
        eProgress.style.width = this.width-4;
        this.currPos = pos;
       }else if(pos<=0){
        eProgress.style.width = 0;
        this.currPos = pos;
       }else{
        eProgress.style.width = pos;
        this.currPos = pos;
       }
       return this.currPos;
      }catch(e){
       alert(e.description);
       return -1;
      }
     }
     function xyUpdateToPosition(pPosition){   /*将progress更新到pPosition位置,其中,min<pPersent<max*/
      try{
       var max = this.max;
       var min = this.min;
       var e = document.all(this.xyProgressID);
       if(pPosition<min||pPosition>max){
        return -1;
       }
       var len = this.width;
       var pos = ((pPosition-min)/(max-min))*len;
       eProgress = e.children(0).children(0);
       if(pos>=this.width){
        eProgress.style.width = this.width-4;
        this.currPos = pos;
       }else if(pos<=0){
        eProgress.style.width = 0;
        this.currPos = pos;
       }else{
        eProgress.style.width = pos;
        this.currPos = pos;
       }
       return this.currPos;
      }catch(e){
       alert(e.description);
       return -1;
      }
     }
     function xyUpdatePersent(pPersent){   /*从当前位置增长或减小pPersent%,pPersent大于零:增长,否则,减小*/
      try{
       var e = document.all(this.xyProgressID);
       e = e.children(0).children(0);
       var len = this.width;
       var pos = this.currPos;
       len = len*pPersent/100;
       pos += len;
       if(pos>this.width||pos<0){
        return -1;
       }
       e.style.width = pos;
       this.currPos = pos;
       return this.currPos;
      }catch(e){
       alert(e.description);
       return -1;
      }
     }
     function xyUpdateToPersent(pPersent){   /*从当前位置增长或减小到pPersent%*/
      try{
       var e = document.all(this.xyProgressID);
       e = e.children(0).children(0);
       var len = this.width;
       var pos = len*pPersent/100;
       if(pos>this.width||pos<0){
        return -1;
       }
       e.style.width = pos;
       this.currPos = pos;
       return this.currPos;
      }catch(e){
       alert(e.description);
       return -1;
      }
     } function xyNewID(){
      var d = new Date();
      var t = "oDraw_"+d.getTime().toString();
      return t;
     }
    </SCRIPT><META content="MSHTML 6.00.2600.0" name=GENERATOR></HEAD>
    <BODY id=bodyID topMargin=0 onload=update()>
    <SCRIPT>
     var xy = new xyProgressLG("kitty");
     xy.SetProgressLeft(200)
     xy.SetProgressTop(200);
     xy.SetProgressWidth(200)
     xy.SetProgressHeight(20)
     xy.SetProgressMax(200)
     xy.SetProgressMin(50); 
    </SCRIPT><SCRIPT language=JavaScript>
    function update(){
     xy.UpdatePosition(10)
     setTimeout("update()",100);
    }</SCRIPT>
    <BUTTON onclick=xy.UpdateToPersent(20)>update</BUTTON><BUTTON 
    onclick=xy.UpdatePosition(10)>updatePosition</BUTTON><BUTTON 
    onclick=update()>autoUpdate</BUTTON> </BODY></HTML>
      

  2.   

    本人的收藏
    layout.jsvar ua = window.navigator.userAgent;
    var opera = /opera [56789]|opera\/[56789]/i.test(ua);
    var ie = !opera && /msie [56789]/i.test(ua);
    var moz = !opera && /mozilla\/[56789]/i.test(ua);if (!window.rootPath)
    window.rootPath = "/";function Import() {
    for( var i=0; i<arguments.length; i++ ) {
    var file = arguments[i];
    if ( file.match(/\.js$/i)) 
    document.write('<script type=\"text/javascript\" src=\"' + file + '\"></sc' + 'ript>');
    else
    document.write('<style type=\"text/css\">@import \"' + file + '\" ;</style>');
    }
    };function getParameter( sProp ) {
    var re = new RegExp( sProp + "=([^\\&]*)", "i" );
    var a = re.exec( document.location.search );
    if ( a == null )
    return null;
    return a[1];
    };function drawScrollBar() {
    var scrollBorderColor = "#666666";
    var scrollFaceColor = "#AAD1F2";//"#b6bdd2";
    with (document.body.style) {
    scrollbarDarkShadowColor = scrollBorderColor;
    scrollbar3dLightColor = scrollBorderColor;
    scrollbarArrowColor = "white";
    scrollbarBaseColor = scrollFaceColor;
    scrollbarFaceColor = scrollFaceColor;
    scrollbarHighlightColor = scrollFaceColor;
    scrollbarShadowColor = scrollFaceColor;
    scrollbarTrackColor = "white";
    }
    };function writeFoot() {
    document.write('<hr size=1 color="#3366cc"><div class="text" align="center"><font size=2 color=green>Author:</font> Forbes Pu</div>' + 
    '<div class="text" align="center"><font size=2 color=green>Last Modified: </font> ' + document.lastModified + '</div>');
    };function writePageTitle(sText) {
    top.document.title = sText;
    };function openWin(sURL,left,top,width,height,fullscreen,resizable) {
    var w=window.open(sURL,"_blank","menubar=0,location=0,status=0,toolbar=0,scrollbars=1"+(left?",left="+left:"")+(top?",top="+top:"")+(width?",width="+(width-8):"")+(height?",height="+(height-32):"")+(fullScreen?",fullscreen=1":"")+(resizable?",resizable=1":""),false);
    w.focus();
    };if (ie) {
    window.attachEvent("onload", drawScrollBar);
    }//Import('progressorbar.js', 'lib.js', 'emu.js', 'menu.js', 'items.js', 'default.css');
    Import('progressorbar.js');
    if (top != self) top.location.replace(window.rootPath);
      

  3.   

    progressorbar.js
    var ua = window.navigator.userAgent;
    var ie = /msie [56789]/i.test(ua);
    var moz = /mozilla\/[56789]/i.test(ua);
    var ie5 = /msie 5\.0/i.test(ua);function progressorbar() {};progressorbar.dir = 1;
    progressorbar.width = 300;
    progressorbar.height = 90;progressorbar.initialize = function () 
    {
    var x = progressorbar.fixPosition();
    var sHTML = '<div id="WebProgessorBar" style="z-index:999999;background:ThreeDFace;border:2px outset;-moz-border-left-colors:ThreeDLightShadow ThreeDHighLight;-moz-border-right-colors:ThreeDDarkShadow THreeDShadow;-moz-border-top-colors:ThreeDLightShadow ThreeDHighLight;-moz-border-bottom-colors:ThreeDDarkShadow ThreeDShadow;width:' +
    progressorbar.width + 'px;height:' +
    progressorbar.height + 'px;left:' +
    x.left + 'px;top:' +
    x.top + 'px;position:absolute"><table cellspacing=1 cellpadding=0 border=0 width=100% height=100% align=center><tr><td style="height:20px;vertical-align:top;text-align:left"><div style="padding:2px 0px 0px 2px;height:20px;overflow:hidden;background:ActiveCaption;font:Caption;color:CaptionText">Loading...</div></td></tr><tr><td style="text-align:center;vertical-align:'+(ie5?"top":"middle")+'"><div align=center><div style="width:80%;height:20px;border:1px solid ThreeDShadow;background:window;overflow:hidden;text-align:left;padding:1px;font-size:0px;-moz-appearance:progressbar"><div style="width:60px;height:16px;position:relative;left:0px;background:HighLight;overflow:hidden;-moz-appearance:progresschunk;font-size:0px">&nbsp;</div></div></div></td></tr></table></div>'
    document.write(sHTML);
    };progressorbar.start = function () 
    {
    progressorbar.initialize();
    var p = document.getElementById("WebProgessorBar");
    if (p) {
    progressorbar.element = p;
    progressorbar.fixPosition();
    progressorbar.timer = window.setInterval(progressorbar.move, 1);
    }
    if (ie) 
    window.attachEvent("onload", progressorbar.dispose);
    else
    window.addEventListener("load", progressorbar.dispose, false);
    };progressorbar.fixPosition = function () 
    {
    var p = progressorbar.element;
    if (p) {
    var w =  document.body.clientWidth || window.innerWidth;
    var h = document.body.clientHeight || window.innerHeight;
    var x = ie ? document.body.scrollLeft : window.pageXOffset;
    var y = ie ? document.body.scrollTop : window.pageYOffset;
    var l = x + parseInt((w - progressorbar.width)/2);
    var t = y + parseInt((h - progressorbar.height)/2)
    p.style.left = l + 'px';
    p.style.top = t + 'px';
    }
    return {
    "left": l,
    "top": t
    }
    };progressorbar.move = function () 
    {
    var p = progressorbar.element;
    if (p) {
    var v = p.getElementsByTagName("div")[2].firstChild;
    var l = parseInt(v.style.left);
    if (progressorbar.dir==1 && l >= v.parentNode.offsetWidth) 
    progressorbar.dir = -1;
     else if (l <= -v.offsetWidth)
    progressorbar.dir = 1;
    v.style.left = l + progressorbar.dir * 2;
    if (ie) v.style.filter = "Alpha(" + (progressorbar.dir > 0 ? "Opacity=0,FinishOpacity=100" : "Opacity=100,FinishOpacity=0") + ",Style=1,StartX=0,StartY=0,FinishX=100,FinishY=0);"
    progressorbar.fixPosition();
    }
    };progressorbar.dispose = function () 
    {
    var p = p = progressorbar.element;
    if (p) {
    p.parentNode.removeChild(p);
    clearInterval(progressorbar.timer);
    }
    };
      

  4.   

    index.html<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <script language="JavaScript" src="layout.js"></script>
    </head>
    <body>
    <script type="text/JavaScript">
    <!--
    progressorbar.start();
    //WebMenuBar.write();
    //-->
    </script><div class="footer">
    <script type="text/javascript">writeFoot();</script>
    <img align="absmiddle" src="http://www.csdn.net">
    </div>
    </body>
    </html>
      

  5.   

    我这里有一个这样的代码，可是连接的target只能是默认的_self，换成其他就会有问题，能不能帮忙解决一下呢？比如，点击连接出来单独新页_blank，或者反到_parent，等等的时候，先出来loading，完毕了以后在load()连接的相应页面呢？我的代码如下？看看怎么改？
    <HTML>
    <HEAD>
    <TITLE>连接loading</TITLE>
    <meta name="Author" content="www.xjap.xj">
    <META content="text/html; charset=gb2312" http-equiv=Content-Type>
    </HEAD>
    <BODY>
    <div id=waiting style="position:absolute;z-index:1;display:none;border: 2 outset #F2F2F2">
      <table border="0" cellpadding="0" cellspacing="0" width="360" style="background-color: #D6D3CE; font-size: 12px;">
        <tr>
          <td width="358" style="background-color: #000080; color: #FFFFFF; padding: 2">请稍候...</td>
        </tr>
        <tr>
          <td width="358" align="center"><img src="jsimg/loadbg.gif"></td>
        </tr>
        <tr>
          <td width="358" height="20"  style="padding: 2;word-break:break-all;" id="linktext"></td>
        </tr>
        <tr>
          <td width="358" height="10"  style="padding: 0;border: 1 inset #F2F2F2"><img src="" width=1 height=10 name=sbar style="FILTER: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0);background-color:#000080"></td>
        </tr>
      </table>
    </div><SCRIPT LANGUAGE="JavaScript">
    document.all.waiting.style.pixelTop = (document.body.offsetHeight - 120) / 2 + document.body.scrollTop;
    document.all.waiting.style.pixelLeft = (document.body.offsetWidth - 360) / 2 + document.body.scrollLeft;
    function link()
    { 
    o=event.srcElement
    while(o.tagName != "A")
    {
    if(!o.parentElement) return
    o=o.parentElement
    }
    event.returnValue = false
    document.all.linktext.innerHTML = "正在打开：<u>"+o.href+"</u>"
    document.all.waiting.style.display="";
    times = setInterval('showloading();',100);
    }
    document.onmousedown=link;
    function showloading()
    {
    if (document.sbar.width>356)
    {
    document.sbar.width=1
    //clearInterval(times)
    }
    else
    {
    document.sbar.width += 2;
    }
    }
    </script><A HREF="http://www.163.net">http://www.163.net</A></BODY>
    </HTML>