一种比较酷的页面载入特效代码

王朝other·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

在<head></head>区域中加入以下代码

<script src="js/loadbar.js" type="text/javascript"></script>

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;

}

}

在<body></body>区域中加入以下代码

<body onMouseOver="window.status='喜欢本站,别忘了与朋友分享哦!';return true" onload="loadBar(0)">

<div id="loader">

<table class="loader" style="FILTER: Alpha(opacity=75)" cellspacing="1" cellpadding="5" bgcolor="#bbbbb" border="0">

<tbody><tr>

<td align="left" bgcolor="#ffffff">

<p><img style="MARGIN: 3px" height="32" alt="数据载入中..." src="images/wait.gif" width="32" align="left" /><strong>数据载入中...</strong><br />

<span>正在载入页面, 请稍候...</span></p></td></tr>

</tbody></table>

</div>

<script language="JavaScript" type="text/javascript">loadBar(1);</script>

附上wait.gif图片....

<head>

<script type="text/javascript">

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;

}

}

</script>

</head>

<body>

<body onMouseOver="window.status='喜欢本站,别忘了与朋友分享哦!';return true" onload="loadBar(0)">

<div id="loader">

<table class="loader" style="FILTER: Alpha(opacity=75)" cellspacing="1" cellpadding="5" bgcolor="#bbbbb" border="0">

<tbody><tr>

<td align="left" bgcolor="#ffffff">

<p><img style="MARGIN: 3px" height="32" alt="数据载入中..." src="/Article/UploadFiles/200605/200651713429466.gif" width="32" align="left" /><strong>数据载入中...</strong><br />

<span>正在载入页面, 请稍候...</span></p></td></tr>

</tbody></table>

</div>

<script language="JavaScript" type="text/javascript">loadBar(1);</script>

</body>

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航