本文為原創文章，轉載請注明出處，謝謝。
/**
* @author samkin.yang
* @version 1.0
*/
var $_yxj = new SamkinLoading();
(function($){
if($){
$.fn.extend({
showLoading : function(){
$_yxj.showLoading($(this).attr("id"));
},
hideLoading : function(){
$_yxj.hideLoading($(this).attr("id"));
}
});
}
})(jQuery);
function DomInfo(i,t,l,w,h){
this.id = i;
this.offsetTop = t;
this.offsetLeft = l;
this.width = w;
this.height = h;
};
function SamkinLoading(){
this.iconUrlPrix = "";
this.loading = function(domId){
};
this.getLoadingDivInfo = function(domId) {
var dom = document.getElementById(domId);
var t=dom.offsetTop;
var l=dom.offsetLeft;
var domHeight = dom.clientHeight;
var domWidth = dom.clientWidth;
while(dom=dom.offsetParent){
t+=dom.offsetTop;
l+=dom.offsetLeft;
}
return new DomInfo(domId,t,l,domWidth,domHeight);
};
this.createDiv = function(domId){
var domInfo = this.getLoadingDivInfo(domId);
var bottomDiv;// = document.createElement("div");
bottomDiv = document.getElementById("loadingDiv_" + domId);
if(!bottomDiv) {
bottomDiv = document.createElement("div");
bottomDiv.setAttribute("id", "loadingDiv_"+domInfo.id);
var topDiv = document.createElement("div");
topDiv.className = "samkin-loading-top-div";
bottomDiv.appendChild(topDiv);
document.body.appendChild(bottomDiv);
}
// newNode.style.filter =
// "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=50,finishOpacity=50)";
// newNode.style.filter = "Alpha(Opacity=50, FinishOpacity=100, Style=1,
// StartX=0, StartY=0, FinishX=100, FinishY=140)";
bottomDiv.style.top = domInfo.offsetTop + "px";
bottomDiv.style.left = domInfo.offsetLeft + "px";
bottomDiv.style.width = domInfo.width + "px";
bottomDiv.style.height = domInfo.height + "px";
bottomDiv.setAttribute("class", "samkin-loading-bottom-div");
bottomDiv.className = "samkin-loading-bottom-div";
bottomDiv.style.display = document.getElementById(domInfo.id).style.display;
// bottomDiv.style.backgroundImage = "url('" + this.iconUrlPrix
// +"/images/star.gif')";
/*
* if(this.isIE()){ //bottomDiv.style.filter =
* "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=50,finishOpacity=50)";
* //bottomDiv.style.filter = "Alpha(Opacity=50, FinishOpacity=100,
* Style=1, StartX=0, StartY=0, FinishX=100, FinishY=140)";
* bottomDiv.style.filter = "Alpha(Opacity=20)"; } else {
* bottomDiv.style.opacity = "0.2"; }
*/
};
this.isIE = function() {
if(document.body.addEventListener) // W3C
{
return false;
}
else if(document.body.attachEvent) // IE
{
return true;
}
};
this.showLoading = function(domId){
/*
* var dom = document.getElementById("loadingDiv_" + domId); if(dom) {
* dom.style.display = "block"; } else { var domInfo =
* this.getLoadingDivInfo(domId); this.createDiv(domInfo); }
*/
this.createDiv(domId);
};
this.hideLoading = function(domId){
var dom = document.getElementById("loadingDiv_" + domId);
if(dom) {
dom.style.display = "none";
}
};
this.createLoadingObj = function(domId){
return
};
this.test = function(domId){
this.showLoading(domId);
};
};
使用方法，
如果在引入了jQuery環境下，可以這樣使用：
顯示遮罩層:$("#id").showLoading();
去除遮罩層:$("#id").hideLoading();
如果沒有引入jQuery的時候可以這樣用：
顯示遮罩層:$_yxj.showLoading('id');
去除遮罩層:$_yxj.hideLoading('id');
@CHARSET "BIG5";
.samkin-loading-bottom-div {
position: absolute;
width: 100px;
height: 60px;
background-color: black;
overflow: hidden;
display: block;
opacity:0.8;/* w3c */
filter:alpha(opacity=80);/* ie */
}
.samkin-loading-top-div {
clear:both;
width:100%;
height:100%;
background: url('images/two-circle.gif') white no-repeat center;
}