1、需要两个DIV,一个用来遮罩,另一个用来显示Loading图片和文字(初始时它们是隐藏的)

.gdiv_over {
display: none;
position: absolute;
top:;
left:;
background-color: #f5f5f5;
opacity: 0.5;
z-index:;
border:;
} .gdiv_layout {
display: none;
padding: 5px 5px 0 0;
position: absolute;
width: 200px;
height: 45px;
z-index:;
text-align: center;
background-color: #fff;
vertical-align: middle;
border: 3px solid #428bca;
}
<div class="gdiv_over"></div>
<div class="gdiv_layout">
  <img style="width: 30px; height: 30px; border: 0" src="../img/ajaxloading.gif" title="正在处理,请稍后...." />
  <span style="font-size: 16px">正在处理,请稍后....</span>
</div>

2、需要用的时候,通过JS脚本修改其隐藏为显示,并且调整大小和位置

function show_LoadingDIV() {
  //遮罩
  $(".gdiv_over").height($(document).height());
  $(".gdiv_over").show("slow");
  //计算 Top
  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);
  //计算 Left
  var dh = $(window).width();
  var lh = $(".gdiv_layout").width();
  var cha2 = (dh / 2) - (lh / 2);
  $(".gdiv_layout").css("left", cha2);
  //Loading图片 和 文字
  $(".gdiv_layout").show("slow");
}
function hide_LoadingDIV() {
  $(".gdiv_over").hide("slow");
  $(".gdiv_layout").hide("slow");
}

3、还需注册下滚动条事件,保持 图片和文字 DIV 总是居中显示

$(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);
    }
  });
});

一个Loading 遮罩效果的更多相关文章

  1. JS-easyui 扩展easyui.datagrid,添加数据loading遮罩效果代码

    (function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: function(jq){ return jq.each(functio ...

  2. jQuery扩展easyui.datagrid,添加数据loading遮罩效果代码

    //jquery.datagrid 扩展加载数据Loading效果 (function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: fu ...

  3. 扩展easyui.datagrid,添加数据loading遮罩效果代码 --来自网摘收集

    //jquery.datagrid 扩展 (function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: function(jq){ r ...

  4. 扩展easyUI tab控件,添加加载遮罩效果

    项目里要用HighChart显示图表,如果返回的数量量太多,生成图表是一个很耗时的过程.tab控件又没有显示遮罩的设置(至少本菜是没有找到), Google了一下,根据另一个兄台写的方法,拿来改造了一 ...

  5. js弹出对话框,遮罩效果,

    刚刚来到实习单位,我跟着廖哥做项目.然后他分配给我一个小小的任务,实现起来总的效果如下: 然后,但我们单击显示数目这个链接的时候,就会弹出一个又遮罩效果的对话框,如下图: 当我们在对话框中再点击里面的 ...

  6. jquery 半透明遮罩效果 小结

    最近偏离学术的道路越来越远了!! 今天要小结的是实现一个半透明遮罩效果.点击页面上的一个按钮,立即在屏幕的正中央显示某个部件,并且在这个部件之外的区域像是蒙上了一层半透明的遮罩.点击遮罩区域,该正中央 ...

  7. WPF loading遮罩层 LoadingMask

    原文:WPF loading遮罩层 LoadingMask 大家可能很纠结在异步query数据的时候想在wpf程序中显示一个loading的遮罩吧 今天就为大家介绍下遮罩的制作 源码下载 点击此处 先 ...

  8. [读码][js,css3]能感知鼠标方向的图片遮罩效果

    效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...

  9. 【原】使用Xfermode正确的绘制出遮罩效果

    以前写as3的时候,遮罩效果一个mask属性就搞定了,真是方便. 转到android上以后,发现要实现类似的效果,可以使用Xfermode,android一共提供了三种: AvoidXfermode; ...

随机推荐

  1. 小甲鱼Python笔记(类)

    类和对象 类的构造方法 def __init__(): 1 class People: 2 def __init__(self,name): 3 self.name = name 注意:在构造方法中的 ...

  2. javax.persistence.EntityNotFoundException: Unable to find报错

    这类错id 可能是10,可能是27,也可能是其他数字 错误描述: javax.persistence.EntityNotFoundException: Unable to find 某个类 with ...

  3. asp.net传多个值到其它页面的方法

    网站开发中,在页面之间的跳转,经常会用到传值,其中可能会传递多个值. 一.CommadArgument传多个值到其他页面. 像Gridview dataList repeater等数据绑定控件中,可以 ...

  4. [I/O]javaI/O工作机制

    摘要:IO问题可以说是当今web应用中面临的主要问题之一.因为在这个数据爆发的时代,海量的数据在网络到处流动,而在这个过程中都会涉及IO问题,可以说IO问题已经成为web应用的瓶颈之一.如何优化?以此 ...

  5. Mybatis 源码分析之一二级缓存

    一级缓存 其实关于 Mybatis 的一级缓存是比较抽象的,并没有什么特别的配置,都是在代码中体现出来的. 当调用 Configuration 的 newExecutor 方法来创建 executor ...

  6. here with you

    Here With You - Asher Book To all my friends对我所有好友来讲The night is young夜未央The music's loud乐未殇They pla ...

  7. 缩略图信息提取工具vinetto

    缩略图信息提取工具vinetto   在Windows操作系统中,为了方便用户快速浏览图片,系统会自动为每个图片生成预览图.预览图默认保存在同目录的Thumbs.db文件中.当图片文件删除后,Thum ...

  8. 【UOJ #204】【APIO 2016】Boat

    http://uoj.ac/problem/204 肯定要离散化的,先离散化出\(O(n)\)个取值区间. 设\(f(i,j)\)表示第\(i\)所学校派出的划艇数量在\(j\)区间中. \(f(i, ...

  9. 我的OI生涯 第三章

    第三章 日子过得就像那些不眠的晚上,她嚼着口香糖对墙满谈着理想.——————赵雷<成都> NOIP过后我认识到了自己有多么菜,我换了座,到了靠窗户那排. 大王开始给我们介绍一些高端算法,那 ...

  10. 【bzoj1875】【JZYZOJ1354】[SDOI2009]HH去散步 矩阵快速幂 点边转换

    http://172.20.6.3/Problem_Show.asp?id=1354 http://www.lydsy.com/JudgeOnline/problem.php?id=1875  题意: ...