一个“网页加载中”的特效代码

记录一下,说不定以后用得上。

<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==0len += dir;
    if (
len>32 || pos>79pos += dir;
    if (
pos>79len -= dir;
    if (
pos>79 && len==0pos=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]的么?

还是有其他的标记?
Post by zhua on 2006-05-31, 1:43 PM #1
引用 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%">&nbsp;</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%">&nbsp;</p>
<p align=center style="color: #0085dd; font-family: 宋体; font-szie:12px; line-height: 100%">&nbsp;</p>
<p align=center style="color: #0085dd; font-family: 宋体; font-szie:12px; line-height: 100%">&nbsp;</p>
<p align=center style="color: #0085dd; font-family: 宋体; font-szie:12px; line-height: 100%">&nbsp;</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>
Post by Yx127 on 2006-05-31, 4:54 PM #4
引用 zhua 说过的话:
上面的代码是用[php]...[/php]的么?
还是有其他的标记?

是用[php]
就是,我同意上面的,感觉是要好点!
<body>下面加<div id="wait"> 正在加载...</div>

</body>上面加<script>document.getElementById("wait").style.display="none";</script>
然后css加个wait的样式更简单。
Post by canstar on 2006-06-01, 3:47 PM #7
不错
谢谢
to: Yx127
一点不实用!明显差别很大!最好的就是一边加载一边显示页面,而你的非要显示加载进度条后转到显示页面!
Post by shuyi on 2007-04-03, 10:54 AM #9

发表评论

评论内容 (必填):

My E-mail