当前位置:编程学习 > JS >>

js loading image class

自己看代码,不解释。
 
Standby.js
 
 
 
[javascript]  
function Standby (obj){  
    this.coverObj;// bei cover obj  
    this.loadingDiv; // loading div  
    /* set loading div z-Index ,if you don't use 2 loading div ,don't need to use this function 
     the z-Index greater will dispaly over the less z-Index loading div. 
  */  
    this.zIndex = 2000;  
    /*  you can change the loading image url  */  
    this.loadingImgUrl = "http://www.leinhaeupl-neuber.de/img/loading_animated2.gif";  
    /* loading image size */  
    this.loadingImgWidth = '23px';  
    this.loadingImgHeight='23px';  
      
        this.loadingDiv = document.createElement("div");  
        document.body.appendChild(this.loadingDiv);  
          
        try{  
            if(typeof(obj)== 'object'){  
                this.coverObj = obj;  
                if(obj.id){  
                    this.loadingDiv.id = obj.id+'_loadingDiv';  
                }  
            }else if (typeof(obj) == 'string'){  
                this.coverObj = document.getElementById(obj);  
                this.loadingDiv.id = obj+'_loadingDiv';  
            }else{  
                throw "obj has error!";  
            }  
        }catch(e){  
            var msg = "Can't not find the component by id["+obj+"],plaese check!!";  
            alert(msg);  
            //console.log(msg+" error :"+e);  
        }  
        //console.log(this.coverObj);  
          
        var dheight = this.coverObj.offsetHeight;  
        var dwidth = this.coverObj.offsetWidth;  
        //for body not to show scroll  
        var bodyheight = this.coverObj.clientHeight;  
        var bodywidth = this.coverObj.clientWidth;  
          
        var dtop = this.coverObj.offsetTop;  
        var dleft = this.coverObj.offsetLeft;  
          
        // SET DIV CSS  
        if(this.coverObj == document.body ){  
            this.loadingDiv.style.height = bodyheight;  
            this.loadingDiv.style.width = bodywidth;  
        }else{  
            this.loadingDiv.style.height = dheight;  
            this.loadingDiv.style.width = dwidth;  
        }  
                  
        this.loadingDiv.style.display = "none";  
        this.loadingDiv.style.position = "absolute";  
        //this.loadingDiv.style.float = "left";  
        this.loadingDiv.style.left = dleft;  
        this.loadingDiv.style.top = dtop;  
        this.loadingDiv.style.backgroundColor = "#fff";  
        this.loadingDiv.style.border = "solid 1px #cccccc";  
        this.loadingDiv.style.overflowX = "hidden";  
        //this.loadingDiv.style.verticalAlign = "middle";  
        //this.loadingDiv.style.textAlign = "center";  
  
        //content  
        var contentObj = document.createElement("span");  
        this.loadingDiv.appendChild(contentObj);          
        //set font  
        //contentObj.innerHTML="loading...";  
        contentObj.innerHTML = "<img src='"+this.loadingImgUrl+"' width='"+this.loadingImgWidth+"' height='"+this.loadingImgHeight+"'/>"  
        contentObj.style.height = this.loadingImgHeight;  
        contentObj.style.width = this.loadingImgWidth;  
          
        contentObj.style.display = "block";  
        //contentObj.style.lineHeight = parseInt(this.loadingDiv.style.height);  
        contentObj.style.marginTop = (parseInt(this.loadingDiv.style.height) - parseInt(contentObj.style.height))/2 + 'px';  
        contentObj.style.marginLeft = (parseInt(this.loadingDiv.style.width) - parseInt(contentObj.style.width))/2 + 'px';  
        //contentObj.style.textAlign = "center";  
        //contentObj.style.whiteSpace = "nowrap"; // not allow to 2 line      
          
}  
// show loading div  
Standby.prototype.show = function(){  
    this.loadingDiv.style.zIndex = this.zIndex;  
    this.loadingDiv.style.display = "block";  
}  
// hidden loading div  
Standby.prototype.hidden = function(){  
    this.loadingDiv.style.display = "none";  
}  
 
testStandby.html
 
[html]  
<HTML>  
<HEAD>  
<style>  
      
      
</style>  
<script src="Sta
补充:web前端 , JavaScript ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,