标签:
首先在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"); }
最后在需要的地方调用就好了。
标签:
原文地址:http://www.cnblogs.com/gzlisme/p/4283629.html