当前页面: 开发资料首页 → Javascript 专题 → 一种比较酷的页面载入特效代码
一种比较酷的页面载入特效代码
摘要: 一种比较酷的页面载入特效代码
<tr>
<td>
在<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)">
<table class="loader" style="FILTER: Alpha(opacity=75)" cellspacing="1" cellpadding="5" bgcolor="#bbbbb" border="0">
<tr>
<td align="left" bgcolor="#ffffff">
数据载入中...
正在载入页面, 请稍候...
</td></tr>
</table>
<script language="JavaScript" type="text/javascript">loadBar(1);</script>
附上wait.gif图片....
<textarea class=fm id=code5 rows=12 cols=78><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)">
<table class="loader" style="FILTER: Alpha(opacity=75)" cellspacing="1" cellpadding="5" bgcolor="#bbbbb" border="0">
<tr>
<td align="left" bgcolor="#ffffff">
数据载入中...
正在载入页面, 请稍候...
</td></tr>
</table>
<script language="JavaScript" type="text/javascript">loadBar(1);</script>
</body></textarea>
<input style="CURSOR: hand" onfocus=this.blur() onclick="runEx('code5')" type=button value=运行代码> <input style="WIDTH: 95px; CURSOR: hand" onfocus=this.blur() onclick=cycode(code5) type=button value=复制到剪贴板 name=Submit> <input style="CURSOR: hand" onfocus=this.blur() onclick=svcode(code5) type=button value=另存代码> [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
</td>
</tr>
</table>
↑返回目录
前一篇:
几种设为首页的代码
后一篇:
两种漂浮在页面中的广告代码