网站进度条完美解决方案

<BODY onload=loadBar(0)>
<SCRIPT language=javascript src="loadbar.js"></SCRIPT>

<DIV id=loader style="DISPLAY: none; Z-INDEX: 100; POSITION: absolute">
<TABLE style="FILTER: Alpha(opacity=90)" onclick=loadBar(0) cellSpacing=1 
cellPadding=5 bgColor=#bbbbb border=0>
  <TBODY>
  <TR>
    <TD align=left bgColor=#ffffff>
      <P><IMG style="MARGIN: 3px" alt=请等待 src="load.gif" 
      align=left><STRONG>数据载入中...</STRONG></P></TD></TR></TBODY></TABLE></DIV>
<SCRIPT language=javascript type=text/javascript>loadBar(1);</SCRIPT>

====================================================

这个为用于显示进度条的图片，特别漂亮

====================================================

进度条的js文件：loadbar.js

function loadBar(fl)
//fl is show/hide flag
{
  var x,y;
  if (self.innerHeight)
  {// all except Explorer
    x = self.innerWidth;
    y = self.innerHeight;
  }
  else 
  if (document.documentElement && document.documentElement.clientHeight)
  {// Explorer 6 Strict Mode
   x = document.documentElement.clientWidth;
   y = document.documentElement.clientHeight;
  }
  else
  if (document.body)
  {// other Explorers
   x = document.body.clientWidth;
   y = document.body.clientHeight;
  }

    var el=document.getElementById('loader');
    if(null!=el)
    {
        var top = (y/2) - 50;
        var left = (x/2) - 150;
        if( left<=0 ) left = 10;
        el.style.visibility = (fl==1)?'visible':'hidden';
        el.style.display = (fl==1)?'block':'none';
        el.style.left = left + "px"
        el.style.top = top + "px";
        el.style.zIndex = 2;
    }
}
posted @ 2008-05-15 20:21  Ewin  阅读(598)  评论(0)    收藏  举报