1、css样式：
复制代码 代码如下:
@charset utf-8;
* html .showbox,* html .overlay {
position: absolute;
top: expression(eval(document.documentelement.scrolltop) );
}
#ajaxloading {
border: 1px solid #8cbeda;
color: #37a;
font-size: 12px;
font-weight: bold;
}
#ajaxloading div.loadingword {
width: 180px;
height: 50px;
line-height: 50px;
border: 2px solid #d6e7f2;
background: #fff;
}
#ajaxloading img {
margin: 10px 15px;
float: left;
display: inline;
}
.overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 998;
width: 100%;
height: 100%;
_padding: 0 20px 0 0;
background: #f6f4f5;
display: none;
}
.showbox {
position: fixed;
top: 0;
left: 50%;
z-index: 9999;
opacity: 0;
filter: alpha(opacity = 0);
margin-left: -80px;
}
2、js：
复制代码 代码如下:
/**
* 加载动画窗口
*
* @author dendy
* @since 2013-7-19 10:13:05
*/
function getloadinghtml(msg) {
if(!msg) msg = 加载;
var html =
+
+
+
+ + msg + 中，请稍候...
+
+
+
+
;
return html;
}
function ajaxloadinginit(msg) {
var loadingdiv = getloadinghtml(msg);
var h = $(document).height();
$(.overlay).css({height: h});
var div = $(body).find(#loadingdiv);
div.remove();
$(body).append($(loadingdiv));
}
/**
* 开始显示loading，在ajax执行之前调用
* @param msg 操作消息，加载, 保存, 删除
*/
function startloading(msg) {
ajaxloadinginit(msg);
$(.overlay).css({'display':'block','opacity':'0.8'});
$(.showbox).stop(true).animate({'margin-top':'300px','opacity':'1'},200);
}
/**
* 加载完成后隐藏，在ajax执行完成后（complete）调用
*/
function endloading() {
$(.showbox).stop(true).animate({'margin-top':'250px','opacity':'0'},400);
$(.overlay).css({'display':'none','opacity':'0'});
}
3、调用例子：
复制代码 代码如下:
startloading();
$.ajax({
type : post,
url : this.url,
datatype : json,
data : this.args,
success : function (data) {
},
complete : function () {
if (self.showloading == true) endloading();
},
error : this.error
});