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. 关于HTML&CSS的笔记

    最近在看Jon Duckett的HTML&CSS一书(http://book.douban.com/subject/6585090/),书的排版和讲解方式很不错,并且有许多其他教学材料遗漏的关 ...

  2. 编辑器之Sublime Text3、Notepad++

    Sublime text 3 破解版是一款极其强大的代码编辑器,又是一款可以代替记事本的文本编辑器.Sublime text 3拥有着美观的界面和实用的功能,既能够完成代码的编辑又能够完成文本编辑,还 ...

  3. Hadoop(一)Hadoop的简介与源码编译

    一 Hadoop简介 1.1Hadoop产生的背景 1. HADOOP最早起源于Nutch.Nutch的设计目标是构建一个大型的全网搜索引擎,包括网页抓取.索引.查询等功能,但随着抓取网页数量的增加, ...

  4. 【C#日期系列(二)】--C#获取一段时间有多少个星期几

    #region 统计一段时间内有多少个星期几 ///<summary> ///统计一段时间内有多少个星期几 ///</summary> ///<param name=&q ...

  5. 获取对象的key【键】和分别获取数组的key【键】和值

    一.先说对象,如何获取key[键]: var obj={ name:"websong", qq:289483936 } 想要获取这个obj对象的键“name”和"qq&q ...

  6. Centos7中一次性安装开发者工具

    这里使用组安装包,一次性安装所有开发者工具. 1.查看有那些组安装包可用. yum grouplist | more 2.搜索一下有哪些和development有关. yum grouplist | ...

  7. 在Linux中设置UMASK值

    umask值用于设置用户在创建文件时的默认权限,当我们在系统中创建目录或文件时,目录或文件所具有的默认权限就是由umask值决定的. 对于root用户,系统默认的umask值是0022:对于普通用户, ...

  8. 转:Meltdown Proof-of-Concept

    转:https://github.com/IAIK/meltdown Meltdown Proof-of-Concept What is the difference between Meltdown ...

  9. [Codeforces995C]Leaving the Bar 瞎搞

    大致题意: 给出平面上n个向量,对于每个向量可以选择正的V或负的-V,求按照选择的向量走完,最后距离原点<=1.5*1e6的一个选择方案 非正解!!!!!!!!!! 先按距离原点距离由远到近贪心 ...

  10. Ocelot网关统一查看多个微服务asp.net core项目的swagger API接口

    0.前言 整体架构目录:ASP.NET Core分布式项目实战-目录 一.准备 前提需要下载安装consul,项目需要懂添加swagger 统一在网关中配置多个微服务的swagger,需要用到服务注册 ...