杭州设计公司,杭州广告设计公司
网页设计
页面加载进度条效果的实现
信息来源:未知     栏目类别: 网页设计     浏览次数:     发表评论 减小字体 增大字体
1. 将下以代码放入<head></head>之间

&**bsp;程序代码
<style type="text/css">
#loader_co**tai**er {
filter:alpha(opacity=70);
// 进度条透明度
text-alig**:ce**ter;
positio**:absolute;
top:50%;
width:100%;
left: 0;
}

#loader {
fo**t-family:Tahoma, Helvetica, sa**s;
fo**t-size:11.5px;
color:#97dee1;
backgrou**d-color:#FFFFFF;
paddi**g:10px 0 16px 0;
margi**:0 auto;
display:block;
width:230px;
border:1px solid #ffffff;
text-alig**:left;
z-i**dex:2;
}
#loader_bg {backgrou**d-color:#fdfdfd;
positio**:relative;
top:8px;
left:8px;
height:7px;
width:213px;
fo**t-size:1px}
#progress {
height:5px;
fo**t-size:1px;
width:1px;
positio**:relative;
top:1px;
left:0px;
backgrou**d-color:#97dee1
}
</style>
<script la**guage="JavaScript">
//读取框
var t_id = setI**terval(a**imate,20);
var pos=0;
var dir=2;
var le**=0;

fu**ctio** a**imate()
{
var elem = docume**t.getEleme**tById('progress');
if(elem != **ull) {
if (pos==0) le** += dir;
if (le**>32 || pos>179) pos += dir;
if (pos>179) le** -= dir;
if (pos>179 && le**==0) pos=0;
elem.style.left = pos;
elem.style.width = le**;
}
}
fu**ctio** remove_loadi**g() {
this.clearI**terval(t_id);
var targelem = docume**t.getEleme**tById('loader_co**tai**er');
targelem.style.display='**o**e';
targelem.style.visibility='hidde**';
i**itJS();
}
</script>

进度条的颜色值可根据页面风格来修改。


2. 将以下代码加入到<bady></bady>之间
程序代码 程序代码
<div id="loader_co**tai**er">
<div id="loader">
<div alig**="ce**ter">
Loadi**g....<br>
</div>
<div id="loader_bg"><div id="progress"> </div></div>
</div>
</div>

可以在loadi**g中加入任意文字作页面提示和广告。


3. 将<body>的内容改为:
&**bsp;程序代码
<body o**load="remove_loadi**g()" o**keydow**="PressKey()">
本文标签:把本文收藏到 网摘 博采 百度
上一篇:asp网页进度条          回网页设计列表         下一篇:JS静态页面的点击次数统计
搜索本站其他内容: 百度一下:[页面加载进度条效果的实现]   Google搜索:[页面加载进度条效果的实现]
最新网友评论文章↓
1.靠2009-11-19 20:42:45
2.去2009-11-19 20:39:41
3.脑残还是变相炫富?2009-11-16 20:17:58
4.好感动哦2009-11-7 15:40:32
5.怎么学习2009-10-20 10:54:50

文章添加时间:2008-6-11,文件大小:20.25 KB,最近更新时间:2011-12-16 18:04:45 返回TOP↑            

本站文章搜集自网络;共享网络,共享快乐,我为人人,人人为我;如果您知道本站未知来源文章请告知本站谢谢!
文中及留言观点不代表本站;本站转载内容只是为了更好的交流;
若侵犯了您的版权请联系E-mail:有事儿,您Q我!,本站核实后立即处理!

  •             平面设计| 标志设计| 包装设计| 网页设计| 广告设计| VI设计| 画册设计| 专卖店设计| 展位设计| 名片设计| 网站地图|    建议使用IE5及以上1024*768分辨率
  •             友情链接 版权所有 © 杭州威迪广告公司 2008-2010 | TEL:0571-88385993 13296756810 浙ICP备09011107号