查看完整版本: 進度條

fend631 2008-3-9 17:15

進度條

[quote]要完成此效果把如下代碼加入到<body>欄位中
l8B.mH1U <style type="text/css">| r-Yz|v+A
#divLoadCont{position:absolute; z-index:500; left:0; top:0; width:100%; height:98%; clip:rect(0,100%,100%,0); background-color:white; layer-background-color:white; }
j/UOWI)oVm4c9g #divLoad1{position:absolute; layer-background-color:silver; background-color:silver}0c/lN7|:X!]2~%Sr1SH
#divLoad2{position:absolute; left:0; top:0; layer-background-color:navy; background-color:navy}5jz_!|g(O(K ~
#divLoadText{position:absolute; background-color:transparent; font-family:arial,helvetica; color:Navy; font-size:14px; } /gjV8It/`|
</style>wnM~Z~f8cS
<script language="JavaScript" type="text/javascript">
9]7IOa&tf(K*p o function lib_bwcheck(){ //Browsercheck (needed)
EO-S"~ ~     this.ver=navigator.appVersion
s8nGt.gFUv(y$U4jw8^     this.agent=navigator.userAgent
,}Kf:b7v     this.dom=document.getElementById?1:0FKh+wY?7['x
    this.opera5=this.agent.indexOf("Opera 5")>-1
W3gZ#M9KH&Z     this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
f[5]J)sLUJ     this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;0zw)zz?#C.Q#Ecz
    this.ie4=(document.all && !this.dom && !this.opera5)?1:0;"n$R T7u;TB\
    this.ie=this.ie4||this.ie5||this.ie6
^*T/YnF mTKW6r{     this.mac=this.agent.indexOf("Mac")>-1
#f/n;W{!T;i     this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; -b0m9X9eZ;J7K5i
    this.ns4=(document.layers && !this.dom)?1:0;:P9`%_!|U
    this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)Dbm(p6m.[%s
    return thisr+oD yqf Hq)^
}
E%po1H|0PmZ var bw=new lib_bwcheck()
0O\0H1d2qLH8u numImages=10 //How many images you have in your pageTr!\p&m-g
loaderWidth=300 //The width of the loadbar
iD`Q~&Y,dG currentImg=0
.DB#J*pu function lib_doc_size(){
Z |YFp7J&dD4\   this.x=0;this.x2=bw.ie && document.body.offsetWidth-20||innerWidth||0;
fB*q b3M6il   this.y=0;this.y2=bw.ie && document.body.offsetHeight-5||innerHeight||0;V+S:V~Jv)lsH?G
  if(!this.x2||!this.y2) return message('Document has no width or height') W;Z8I#V1F i*\
  this.x50=this.x2/2;this.y50=this.y2/2;
I0e L4?J6Bu   return this;r?m~*Q9Bm({[W.x
}
(o&C'iGR b3Qs5Q function lib_obj(obj,nest){ fgPy?u/`p?+Z@!@@
  nest=(!nest) ? "":'document.'+nest+'.'
2NN^/c:p*C?KK   this.evnt=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj):0;   
Sa3B^oG"U d5?   this.css=bw.dom||bw.ie4?this.evnt.style:this.evnt;
Gf,B%b)c9[mbKt(U   this.ref=this.css
dPT/a1w!tN3w.}   this.w=this.evnt.offsetWidth||this.css.clip.width||
3@:_9b*u:LK.TX'sw     this.ref.width||this.css.pixelWidth||0; O:blO i'pi4~k
  return thisU,i3w S']_[
}
OQ*iN[}%PR?4a lib_obj.prototype.moveIt = function(x,y){
7Ssj\-n   this.x=x;this.y=y; this.css.left=x;this.css.top=y
6sV0i Q4lQ+nx.[ }
S5Qp8CxMb lib_obj.prototype.clipTo = function(t,r,b,l,setwidth){
PPL}V,^"}Y!q4?   this.ct=t; this.cr=r; this.cb=b; this.cl=l
Rf_nI[   if(bw.ns4){HQ"Xte-F
    this.css.clip.top=t;this.css.clip.right=r M7KCqDhMS8B
    this.css.clip.bottom=b;this.css.clip.left=l b.t&W9v\A l
  }else{
G j!h}EW     if(t<0)t=0;if(r<0)r=0;if(b<0)b=0;if(b<0)b=0'eX L1dN0X+oWQ6{^
    this.css.clip="rect("+t+","+r+","+b+","+l+")";
[(M5B"^1p     if(setwidth){this.css.pixelWidth=this.css.width=r; /~5~5t$WM} C{7mx
    this.css.pixelHeight=this.css.height=b}c;E3igdej.Cc s
  }.j6c@H)`"`e
}/`5k"@vK:v1y
var oLoad2x#Og@ s2X
function startLoading(){
7[#IT#u1B@B(P`   page=new lib_doc_size() P4O"`e8M \`5d
  oLoadCont=new lib_obj('divLoadCont')S,LP(im*^f:x7D
  oLoad=new lib_obj('divLoad1','divLoadCont')
%m|4Ul7N   oLoad2=new lib_obj('divLoad2','divLoadCont.document.divLoad1') W:P-[B7l'h
  oLoadText=new lib_obj('divLoadText','divLoadCont.document.divLoad1')
-b;R3a ` Y+W E0I?5a   oLoad.moveIt(page.x50-loaderWidth/2,page.y50-20)0~}(F6VH'uu#JZ
  oLoadText.moveIt(loaderWidth/2 - oLoadText.w/2,10)*eY2G;vb!lwP
  oLoad.clipTo(0,loaderWidth,40,0,1)'G;GM"z1IY,Q*wl[3o [
  oLoad2.per = loaderWidth/numImages4QRk r/v(s?
}
*`7P,fn?:z!k function loadIt(ok){
Fg@ fO'lz.Fc   currentImg++)` s G p;SQ
  if(oLoad2) oLoad2.clipTo(0,oLoad2.per*currentImg,40,0,1)Z"Pa%x%NZ@
  if(!ok){*u w7u6ZH$m[_J
    oLoadCont.css.visibility='hidden'6HW$S| Y?
    oLoadCont=null; oLoad1=null; oLoad2=null;
~.Gj9c-F l'K I   }
+\-u~;t` |,C6t }f6g Qd8J1O
function loadIt_display(ok){ J rd MF.rO0k1PbT
  currentImg++8j5x.e*Z%j2@a.LStbzR
  if(oLoad2) oLoad2.clipTo(0,oLoad2.per*currentImg,40,0,1)
1EIE/d5Il0c   if(currentImg<=numImages) setTimeout("loadIt_display(1)",200)
m"@Z;wp/NJ E   else{+Wkap2V5e
    oLoadCont.css.visibility='hidden'
B e1a*M|5}%M;L+T   }.k G4fv@q
}
WT$P&f?)o6mm </script> Zg1l;?|1df
<div id="divLoadCont">Zz hdwu&E,j!d
  <div id="divLoad1">
Z5Pg'Ou     <div id="divLoad2"></div><br>
@ j.g2{"|'I ^B     <div id="divLoadText">Loading...</div> k(a-FOC)\2M BP
  </div>1O^gz+A `:X&uY_ r
</div>:[t-\ SwEA
<script>
\ u1Ymx startLoading()o'D M2A6{|
//onload=loadIt; //- LEAVE THIS LINE WHILE TESTING. UNCOMMENT WHEN READYZ1iv _7c
loadIt_display(1) //LEAVE THIS LINE WHILE TESTING. DELETE WHEN READY
9U%{gZ%a*j;OZ </script>[/quote]
頁: [1]
查看完整版本: 進度條