//ProgressBar.css
.ProgressBar{ width:4px; height:20px; background-color:#d3d3d3;}
.ProgressBarText {font:10pt Verdana; font-weight:bold; color:#00ff00;}
#divProgressBar
{
position:absolute;
visibility:hidden;
background-color:#696969;
padding:15px 20px 6px 15px;
z-index:100;
}
//ProgressBar.js
var p=0,j=0;
var c=new Array("#00ff00","#d3d3d3")
var barCount = 34
var bar = "<div id='divProgressBar'><table id=talbe1 border=0 cellspacing=1 cellpadding=0><tr>"
for(i=0;i<barCount;i++) bar = bar + "<td id='ProgressBar" + i +"' class=ProgressBar />"
bar = bar + "</tr><tr><td colspan=" + barCount + " align=center class=ProgressBarText>Loading...Please Wait!</td></tr></table></div>"
document.write(bar)
function proccess()
{
var bar = document.getElementById("ProgressBar"+p);
bar.style.background=c[j];
p+=1;
if(p==barCount){p=0;j=1-j;}
}
function ShowProgressBar()
{
var bar = document.getElementById("divProgressBar");
if(bar)
{
bar.style.visibility="visible";
changeProgressBarPos();
setInterval('proccess();',100) ;
}
}
function window.onresize()
{
changeProgressBarPos();
}
function window.onscroll()
{
changeProgressBarPos();
}
function changeProgressBarPos()
{
var bar = document.getElementById("divProgressBar");
if(bar)
{
var width = ((document.documentElement.clientWidth==0)?document.body.clientWidth:document.documentElement.clientWidth);
var height = ((document.documentElement.clientHeight==0)?document.body.clientHeight:document.documentElement.clientHeight);
var top = ((document.documentElement.scrollTop==0)?document.body.scrollTop:document.documentElement.scrollTop);
var left = ((document.documentElement.scrollLeft==0)?document.body.scrollLeft:document.documentElement.scrollLeft);
bar.style.posLeft = left + (width - bar.clientWidth)/2;
bar.style.posTop = top +(height - bar.clientHeight)/2;
}
}
//ASPX page or Html page
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Loading.Default" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<link href="ProgressBar.css" rel="stylesheet" type="text/css" />
<script language="Javascript" src="ProgressBar.js" type="text/javascript"></script>
</head>
<body >
<form id="proccess" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" OnClientClick="Javascript:ShowProgressBar();" />
</div>
</form>
</body>
</html>
posted on 2007-11-07 11:27
GuangMing Lan 阅读(519)
评论(0) 编辑 收藏 引用