百度空间 | 百度首页 
               
 
查看文章
 
一个很好的LOADING效果
2006-12-14 16:01

一个很好的LOADING效果

代码如下,值得学习:

<html>

<head>
<title>进度条测试</title>
<script>
        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.position="absolute";
                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 = 88;
        }
}
</script>
</head>


<body  onload="loadBar(0)">
<div id="loader"><table style="FILTER: Alpha(opacity=90);" class="loader" summary="Loader Layout" border="0" cellpadding="5" cellspacing="1" bgcolor="#bbbbb" >
<tr>
<td bgcolor="#FFFFFF" align="left"><p>
<img src="http://www.chjonline.net/bbs/skins/Default/final/loading.gif" align="left" style="margin:3px" alt="请等待" width="94" height="17"/><strong>数据载入中...</strong><br /> <span style="font-size:8pt;">Please wait until this screen is completely loaded.</span></p></td>
</tr>
</table></div>
<script type="text/javascript" language="javascript">
    loadBar(1);
</script>
   <IFRAME name="login" scrolling="no" SRC="http://www.sina.com.cn/"
                 WIDTH="100%" HEIGHT="100%" MARGINWIDTH="0" MARGINHEIGHT="0" 
                 HSPACE="0" VSPACE="0" FRAMEBORDER="0" SCROLLING="no"> </IFRAME>
  
    
</body>

</html>

 

效果请见

http://www.chjonline.net/bbs/index.asp?boardid=23&page=


类别:Study | 添加到搜藏 | 浏览() | 评论 (0)
 
最近读者:
 
网友评论:
发表评论:
姓 名:
网址或邮箱: (选填)
内 容:
验证码: 请点击后输入四位验证码,字母不区分大小写
      

     

©2009 Baidu