码迷,mamicode.com
首页 > 其他好文 > 详细

一个Loading 遮罩效果

时间:2015-02-10 14:52:10      阅读:374      评论:0      收藏:0      [点我收藏+]

标签:

首先在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");
}

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

 

一个Loading 遮罩效果

标签:

原文地址:http://www.cnblogs.com/gzlisme/p/4283629.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!