<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Album</title> <!-- Author: Hutia --> <style>
html { margin:0px; padding:0px; height:100%; overflow:auto;}
body { margin:0px; padding:0px; height:100%;}
.loadingMask { position:absolute; left:0px; top:0px; width:100%; height:100%; background-color:#909AE0; filter:alpha(opacity=60); opacity:0.6; z-index:200;}
.loadingBar { width:400px; height:6px; border:1px solid black; position:relative; left:50%; top:50%; margin:-3px 0px 0px -200px; overflow:hidden;}
.loadingProcess { width:10px; height:4px; background-color:green; position:absolute; left:1px; top:1px; overflow:hidden;}
.loadingLabel { width:400px; height:40px; line-height:28px; font-size:12px; font-family:arial 宋体; letter-spacing:2px; text-align:center; position:absolute; left:50%; top:50%; margin:0px 0px 0px -200px; overflow:hidden; z-index:205;}
.loadingButton { width:100px; height:16px; border-width:0px; background-color:transparent; color:blue; line-height:16px; font-size:11px; font-family:"Time New Roman" 宋体; letter-spacing:1px; text-align:center; text-decoration:underline; position:absolute; left:50%; top:18px; margin-left:-50px; overflow:hidden; cursor:pointer;}
.imgDIV { border:1px solid #666; margin:4px; width:102px; height:82px; float:left; position:relative;}
.albumImage { position:absolute; border-style:none; filter:alpha(opacity=50); opacity:0.5; cursor:pointer;}
</style> <script>/* Author: Hutia*/
// 定义常量var intMaxWidth=100 /*最大宽度*/, intMaxHeight=80 /*最大高度*/, blnForceSize=true /*是否限制大小*/, blnAutoFit=true /*是否自动放大*/;
// 全局变量var objLoadingMask, objLoadingBar, objLoadingProcess, objLoadingLabel, objLoadingButton;var aryImgs=new Array();var loadedImageCount=0;var blnHideProcess=false;var objBigImg;
function loadImg(src,containerID){ //这个函数必须在 container 载入之后使用 var container, imgDIV; var objTemp=new Image(); objTemp.className="albumImage"; objTemp.style.display="none"; container=document.getElementById(containerID); if(!container)container=document.body; imgDIV=document.createElement("DIV"); imgDIV.className="imgDIV"; imgDIV.style.display="none"; container.appendChild(imgDIV); imgDIV.appendChild(objTemp); objTemp.οnclick=img_onclick; objTemp.οnlοad=img_onload; objTemp.οnerrοr=img_onerror; objTemp.οnmοuseοver=img_onmouseover; objTemp.οnmοuseοut=img_onmouseout; objTemp.index=aryImgs.length; objTemp.containerID=containerID; aryImgs[objTemp.index]=objTemp; objTemp.src=src;}
function img_onclick(){ objBigImg=new Image(); document.body.appendChild(objBigImg); objBigImg.src=this.src; objBigImg.originalWidth=this.originalWidth; objBigImg.originalHeight=this.originalHeight; objBigImg.style.position="absolute"; objBigImg.style.top=html_getRealTop(this)+"px"; objBigImg.style.left=html_getRealLeft(this)+"px"; objBigImg.style.width=this.offsetWidth+"px"; objBigImg.style.height=this.offsetHeight+"px"; objBigImg.style.zIndex=400; objBigImg.tabIndex=0; objBigImg.οnblur=function(){ clearTimeout(this.timeHandle); destory(this); } objBigImg.focus(); }
html_getRealLeft=function(o){ var l=o.offsetLeft; while(o=o.offsetParent){ l+=o.offsetLeft; } return(l); }
html_getRealTop=function(o){ var t=o.offsetTop; while(o=o.offsetParent){ t+=o.offsetTop; } return(t); }
function img_onerror(){ aryImgs.splice(this.index,1); for(var i=this.index;i<aryImgs.length;i++)aryImgs[i].index--; destory(this.parentNode); setProcess();}/* Author: Hutia*/function img_onload(){ var w, h, k1, k2, loadingPercent; loadedImageCount++; this.style.display=""; w=this.originalWidth=this.width; h=this.originalHeight=this.height; k1=intMaxWidth/intMaxHeight; k2=w/h; if((w>intMaxWidth||h>intMaxHeight)&&blnForceSize || (w<intMaxWidth&&h<intMaxHeight&&blnAutoFit)){ if(k2>k1){w=intMaxWidth;h=w/k2;}else{h=intMaxHeight;w=h*k2;} this.style.width=w+"px"; this.style.height=h+"px"; this.style.left=parseInt((intMaxWidth-w)/2+1)+"px"; this.style.top=parseInt((intMaxHeight-h)/2+1)+"px"; } setProcess();}
function img_onmouseout(){ try{this.filters[0].enabled=true;}catch(e){} try{this.style.opacity=0.5;}catch(e){}}
function img_onmouseover(){ try{this.filters[0].enabled=false;}catch(e){} try{this.style.opacity=1;}catch(e){}}
function destory(obj){ obj.parentNode.removeChild(obj);}
function setProcess(){ var loadingPercent; if(blnHideProcess)return; loadingPercent=loadedImageCount/aryImgs.length*100; objLoadingLabel.firstChild.nodeValue="Please wait. Images Loading..."+loadingPercent.toFixed(1)+"% ("+loadedImageCount+"//"+aryImgs.length+")"; objLoadingProcess.style.width=parseInt(loadingPercent*(objLoadingBar.offsetWidth-4)/100)+"px"; if(loadingPercent==100)hideLoading();}
function showLoading(){ //这个函数必须在有 body 之后使用 objLoadingMask=document.createElement("div"); objLoadingMask.className="loadingMask"; document.body.appendChild(objLoadingMask); objLoadingBar=document.createElement("div"); objLoadingBar.className="loadingBar"; objLoadingMask.appendChild(objLoadingBar); objLoadingProcess=document.createElement("div"); objLoadingProcess.className="loadingProcess"; objLoadingBar.appendChild(objLoadingProcess); objLoadingLabel=document.createElement("div"); objLoadingLabel.className="loadingLabel"; objLoadingLabel.innerHTML="Please wait. Images Loading..."; document.body.appendChild(objLoadingLabel); objLoadingButton=document.createElement("input"); objLoadingButton.className="loadingButton"; objLoadingButton.type="button"; objLoadingButton.value="Hide Process"; objLoadingButton.οnclick=hideLoading; objLoadingLabel.appendChild(objLoadingButton); }/* Author: Hutia*/function hideLoading(){ blnHideProcess=true; objLoadingLabel.firstChild.nodeValue="Process Ending..."; setTimeout(finishLoading,500);}
function hideLoading_showAllImg(){ for(var i=0;i<aryImgs.length;i++){aryImgs[i].parentNode.style.display="";}}
function finishLoading(){ destory(objLoadingMask); destory(objLoadingLabel); hideLoading_showAllImg();}
</script> </head> <body> <h1>This is the Demo.</h1> <div id="container1"></div> <script>showLoading();</script> <script>baseURL="http:hutia.monternet-idc.com//album//";loadImg(baseURL+"001.jpg","container1");loadImg(baseURL+"002.jpg","container1");loadImg(baseURL+"003.jpg","container1");loadImg(baseURL+"004.jpg","container1");loadImg(baseURL+"005.jpg","container1");loadImg(baseURL+"006.jpg","container1");loadImg(baseURL+"006error.jpg","container1");loadImg(baseURL+"007.jpg","container1");loadImg(baseURL+"008.jpg","container1");loadImg(baseURL+"009.jpg","container1");loadImg(baseURL+"010.jpg","container1");loadImg(baseURL+"011.jpg","container1");loadImg(baseURL+"012.jpg","container1");loadImg(baseURL+"013.jpg","container1");loadImg(baseURL+"096error.jpg","container1");loadImg(baseURL+"014.jpg","container1");loadImg(baseURL+"015.jpg","container1");loadImg(baseURL+"016.jpg","container1");loadImg(baseURL+"017.jpg","container1");loadImg(baseURL+"018.jpg","container1");loadImg(baseURL+"a06error.jpg","container1"); </script> </body> </html>
