一个Loading 遮罩效果

首先在body的底部增加两个DIV

1 <div class="gdiv_over"></div>
2 <div class="gdiv_layout">
3     <img id="gLoadingGif" src="loading.gif" title="正在处理，请稍后...." />
4 </div>

第二步，把样式加在head

<style type="text/css">
        .gdiv_over {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            background-color: #f5f5f5;
            opacity:0.5;
            z-index: 1000;
        }
        .gdiv_layout {
            display: none;
            position: absolute;
            top: 40%;
            left: 40%;
            width: 20%;
            height: 20%;
            z-index: 1001;
            text-align:center;
        }
    　　#gLoadingGif{
        　　width:40px;
            height:40px;
            border:0
    　　}
</style>

第三步，注册下滚动条事件，增加两个function

$(document).ready(function(){
    $(window).scroll(function(){
        if($(".gdiv_over").css("display") != "none")
        {
            var dh = $(window).height();
            var sh = $(window).scrollTop();
            var lh = $(".gdiv_layout").height();
            var cha = (dh/2) + sh - (lh/2);
            $(".gdiv_layout").css("top",cha);
        }
    });
});
function show_LoadingDIV()
{
    $(".gdiv_over").height($(document).height());
    $(".gdiv_over").show("slow");
    var dh = $(window).height();
    var sh = $(window).scrollTop();
    var lh = $(".gdiv_layout").height();
    var cha = (dh/2) + sh - (lh/2);
    $(".gdiv_layout").css("top",cha);
    $(".gdiv_layout").show("slow");
}
function hide_LoadingDIV()
{
    $(".gdiv_over").hide("slow");
    $(".gdiv_layout").hide("slow");
}

最后在需要的地方调用就好了。