作者:海娃,E-mail:jimao8@163.com
相信各位网页爱好者都对网页的loading很感兴趣吧!,想不想知道如何做一个:)
现在给大家介绍一下一种loading的制作..
效果图:
点下面的网址试试:
load.htm
思路:根据源文件下载的进程来实现的,在网页中每隔一部分,加一段代码,来控制一个图片的长度.显示出下载的进程!
javascript(加在源文件的最前面<html><head>之间)
<script language=JavaScript>
var load_line_i=1;
var load_line_n=20;//网页分成的部分
function load_n(txt)
{load_line_i+=400/load_line_n;//400是load层的宽度
window.status="请等待..正在下载XX"+Math.floor(load_line_i/4.00)+"%";//状态栏显示下载百分比
load_txt.innerText=txt+" "+Math.floor(load_line_i/4.00)+"%";//load层显示的文字与百分比
document.all("line").width=load_line_i;//进度条的宽度}
</script>
下载完成后隐藏对话框javascript(同样加在<html><head>)
<script language=JavaScript>
function finish(){
if(confirm("下载完成..关闭对话框吗?"))document.all("load").style.display='none';}
</script>
如果想要下载完成后,不要确认,直接隐藏进度条,把上面的代码去掉if(confirm("下载完成..关闭对话框吗?"))
把<body>改成<body onload=finish()>
样式表(加在<head></head>之间)
<style type="text/css">
<!--
body, td, div, table { font-size: 9pt;font-family:Verdana}
#load{font-size: 9pt; cursor: default; position: absolute;
display:block;width:402;height:20;top:expression((document.body.clientHeight-50)/2);left:expression((screen.width-400)/2); display: block; z-index:100;background:#EDECE9}
.px1{border: 1px solid black;}
-->
</style>
此处用到了expression,这个比较有用!不必再用js来调用document.body.clientHeight,
#load是控制ID为load的层,表格等元素.主要是让进度条层所在的位置永远位于窗口的中心!
我个觉得用Verdana字体,大小为9pt比较好。
显示部分:(加在<body></body>之间,body的最前面)
<div id=load>请稍候..
<div class=px1><img id=line src="px.gif"
style="background-color: #0000FF" height=10></div>
<div id=load_txt>dd</div>
</div>
说明:我们所看到的效果就是<img id=line src="px.gif"
style="background-color:red" height=10>,
其中px.gif可以用一个一象素透明的图片,只要通过样式表来控制进度条的颜色.
正在下载XX:XX改成所要下载的内容!
把上面代码手工加进网页,
把源文件平均分别几个部,每个部分加上下面代码:(在<body></body>之间)
<script>load_n("正在下载XX:");</script>
分的部分数与上面load_line_n相等,不然下载完成后,会出现超过100%或不足100%
然后试试,看到效果了吗?
上面代码可以到下面网站去
tload.htm
想看看我做的一个应用效果:请到我的网页http://www.51windows.Net去看看.
不足之处:
太小的网页不适合用;
图片多了的不太准.如果没有图片的网页,可以做这种原理是很好的。
以前都是看别人写教程,今天也来写一个服务大家,水平有限,不足之处,请指教!
无忧视窗|请以IE5.0以上版本 800 *
600 浏览本站
http://www.51windows.Net