一个很好的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=