一个“网页加载中”的特效代码
Written by angel on 2006, May 31, 8:31 AM. 杂七杂八
记录一下,说不定以后用得上。
<script language="JavaScript" type="text/javascript">
var t_id = setInterval(animate,20);
var pos=0;
var dir=2;
var len=0;
function animate()
{
var elem = document.getElementById('progress');
if(elem != null) {
if (pos==0) len += dir;
if (len>32 || pos>79) pos += dir;
if (pos>79) len -= dir;
if (pos>79 && len==0) pos=0;
elem.style.left = pos;
elem.style.width = len;
}
}
function remove_loading() {
this.clearInterval(t_id);
var targelem = document.getElementById('loader_container');
targelem.style.display='none';
targelem.style.visibility='hidden';
}
</script>
<style>
#loader_container {
text-align:center;
position:absolute;
top:40%;
width:100%;
left: 0;
}
#loader {
font-family:Tahoma, Helvetica, sans;
font-size:11.5px;
color:#000000;
background-color:#FFFFFF;
padding:10px 0 16px 0;
margin:0 auto;
display:block;
width:130px;
border:1px solid #5a667b;
text-align:left;
z-index:2;
}
#progress {
height:5px;
font-size:1px;
width:1px;
position:relative;
top:1px;
left:0px;
background-color:#8894a8;
}
#loader_bg {
background-color:#e4e7eb;
position:relative;
top:8px;
left:8px;
height:7px;
width:113px;
font-size:1px;
}
</style>
<body onLoad="remove_loading();">
<div id="loader_container">
<div id="loader">
<div align="center">页面正在加载中 ...</div>
<div id="loader_bg"><div id="progress"> </div></div>
</div>
</div>
</body>
« 上一篇 | 下一篇 »
访客评论
上面的代码是用[php]...[/php]的么?
还是有其他的标记?
引用 zhua 说过的话:
上面的代码是用[php]...[/php]的么?
还是有其他的标记?
后台发表文章已经是所见即所得编辑器,为了方便大家还是加入了[php]和[attach=id]两个标签,而前台评论部分,只支持
引用 name 说过的话:
content
一个标签,因为评论大多三言两语,没有必要使用过于复杂的UBB标签。况且对数据输出的速度有一定影响。
梦游的那个?
还是下面这个好
<script language="javascript">
function setSB(v, el) {
var ie5 = (document.all && document.getElementsByTagName);
if (ie5 || document.readyState == "complete") {
filterEl = el.children[0];
valueEl = el.children[1];
filterEl.style.width = v + "%";
valueEl.innerText = v + "%";
}
}
function fakeProgress(v, el) {
if (v > 100)
location.href = "index2.html";
else {
setSB(v, el);
window.setTimeout("fakeProgress(" + (++v) + ", document.all['" + el.id + "'])", 20);
}
}
</script>
<body onLoad="fakeProgress(0, sb)" topmargin=180 bgcolor=#FFFFFF>
<center>
<font color=#FFFFFF> </font>
<p align=center style="color: #0085dd; font-family: 宋体; font-szie:12px; line-height: 100%"> </p>
<p align=center style="color: #0085dd; font-family: 宋体; font-szie:12px; line-height: 100%">loading...</p>
<p align=center style="color: #0085dd; font-family: 宋体; font-szie:12px; line-height: 100%"> </p>
<p align=center style="color: #0085dd; font-family: 宋体; font-szie:12px; line-height: 100%"> </p>
<p align=center style="color: #0085dd; font-family: 宋体; font-szie:12px; line-height: 100%"> </p>
<p align=center style="color: #0085dd; font-family: 宋体; font-szie:12px; line-height: 100%"> </p>
<p align=center style="color: #0085dd; font-family: 宋体; font-szie:12px; line-height: 100%"><font color="#FFFFFF">......</font></p>
<span id=sb style="width: 300px">
<div style="filter: Alpha(Opacity=0, FinishOpacity=60, style=1, StartX=0, StartY=0, FinishX=100, FinishY=0); width: 0%; height: 12px; position: absolute; background: #6ADB95"></div>
<div style="font-size: 12px; width: 100%; color: #ff3333; font-family: arial; text-align: center"></DIV>
</span>
</center>
</body>
</html>
引用 zhua 说过的话:
上面的代码是用[php]...[/php]的么?
还是有其他的标记?
是用[php]
就是,我同意上面的,感觉是要好点!
<body>下面加<div id="wait"> 正在加载...</div>
</body>上面加<script>document.getElementById("wait").style.display="none";</script>
然后css加个wait的样式更简单。
不错
谢谢
to: Yx127
一点不实用!明显差别很大!最好的就是一边加载一边显示页面,而你的非要显示加载进度条后转到显示页面!
发表评论