js:
刚写的一个快速添加加载等待效果的js，快速添加，省时省力。
js:
/*
* 增加异步加载遮罩
* @auth:firmy
* @mail:fimry@foxmail.com
* 使用方法:在异步请求前加遮罩：addLoadCover()
* 异步完成后关掉遮:closeCover()
* 例：
* function(){
* addLoadCover();
* $.getJSON(url,params,function(data){
* ...
* ...
* ...
* closeCover();
* });
* }
*/
function showBg(ct, content) {
var bH = $("body#body").height();
var bW = $("body#body").width() + 16;
var objWH = getObjWh(ct);
$("#fullbg").css({
width : bW,
height : bH,
display : "block"
});
var tbT = objWH.split("|")[0] + "px";
var tbL = objWH.split("|")[1] + "px";
$("#" + ct).css({
top : "180px",
left : tbL,
display : "block"
});
// $("#"+content).html("");
$(window).scroll(function() {
resetBg()
});
$(window).resize(function() {
resetBg()
});
}
function getObjWh(obj) {
var st = document.documentElement.scrollTop;// 滚动条距顶部的距离
var sl = document.documentElement.scrollLeft;// 滚动条距左边的距离
var ch = document.documentElement.clientHeight;// 屏幕的高度
var cw = document.documentElement.clientWidth;// 屏幕的宽度
var objH = $("#" + obj).height();// 浮动对象的高度
var objW = $("#" + obj).width();// 浮动对象的宽度
var objT = Number(st) + (Number(ch) - Number(objH)) / 2;
var objL = Number(sl) + (Number(cw) - Number(objW)) / 2;
return objT + "|" + objL;
}
function resetBg() {
var fullbg = $("#fullbg").css("display");
if (fullbg == "block") {
var bH2 = $("body").height();
var bW2 = $("body").width() + 16;
$("#fullbg").css({
width : bW2,
height : bH2
});
var objV = getObjWh("dialog");
var tbT = objV.split("|")[0] + "px";
var tbL = objV.split("|")[1] + "px";
$("#dialog").css({
top : tbT,
left : tbL
});
}
}
function addLoadCover() {
$("body").attr("id", "body");
$("body#body")
.append(
"<!-- JS遮罩层 --> <div id='fullbg'></div> <div id='dialog' style='text-align:center'><img src='/static/images/wait.gif'>正在加载，请稍候...</div>");
showBg('dialog', 'dialog');
}
// 关闭灰色JS遮罩层和操作窗口
function closeCover() {
$("#fullbg").css("display", "none");
$("#dialog").css("display", "none");
} 附css:
#fullbg{
opacity: 0.4; /*透明度*/
background-color: Gray;
display:none;
z-index:3;
position:absolute;
left:0px;
top:0px;
/* IE */
-moz-opacity:0.4;
/* Moz + FF */
opacity: 0.4;
}
#dialog {
position:absolute;
width:40%;
height:20px;
display: none;
z-index: 5;
}
