一个Loading 遮罩效果
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 遮罩效果的更多相关文章
- JS-easyui 扩展easyui.datagrid,添加数据loading遮罩效果代码
(function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: function(jq){ return jq.each(functio ...
- jQuery扩展easyui.datagrid,添加数据loading遮罩效果代码
//jquery.datagrid 扩展加载数据Loading效果 (function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: fu ...
- 扩展easyui.datagrid,添加数据loading遮罩效果代码 --来自网摘收集
//jquery.datagrid 扩展 (function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: function(jq){ r ...
- 扩展easyUI tab控件,添加加载遮罩效果
项目里要用HighChart显示图表,如果返回的数量量太多,生成图表是一个很耗时的过程.tab控件又没有显示遮罩的设置(至少本菜是没有找到), Google了一下,根据另一个兄台写的方法,拿来改造了一 ...
- js弹出对话框,遮罩效果,
刚刚来到实习单位,我跟着廖哥做项目.然后他分配给我一个小小的任务,实现起来总的效果如下: 然后,但我们单击显示数目这个链接的时候,就会弹出一个又遮罩效果的对话框,如下图: 当我们在对话框中再点击里面的 ...
- jquery 半透明遮罩效果 小结
最近偏离学术的道路越来越远了!! 今天要小结的是实现一个半透明遮罩效果.点击页面上的一个按钮,立即在屏幕的正中央显示某个部件,并且在这个部件之外的区域像是蒙上了一层半透明的遮罩.点击遮罩区域,该正中央 ...
- WPF loading遮罩层 LoadingMask
原文:WPF loading遮罩层 LoadingMask 大家可能很纠结在异步query数据的时候想在wpf程序中显示一个loading的遮罩吧 今天就为大家介绍下遮罩的制作 源码下载 点击此处 先 ...
- [读码][js,css3]能感知鼠标方向的图片遮罩效果
效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...
- 【原】使用Xfermode正确的绘制出遮罩效果
以前写as3的时候,遮罩效果一个mask属性就搞定了,真是方便. 转到android上以后,发现要实现类似的效果,可以使用Xfermode,android一共提供了三种: AvoidXfermode; ...
随机推荐
- 关于HTML&CSS的笔记
最近在看Jon Duckett的HTML&CSS一书(http://book.douban.com/subject/6585090/),书的排版和讲解方式很不错,并且有许多其他教学材料遗漏的关 ...
- 编辑器之Sublime Text3、Notepad++
Sublime text 3 破解版是一款极其强大的代码编辑器,又是一款可以代替记事本的文本编辑器.Sublime text 3拥有着美观的界面和实用的功能,既能够完成代码的编辑又能够完成文本编辑,还 ...
- Hadoop(一)Hadoop的简介与源码编译
一 Hadoop简介 1.1Hadoop产生的背景 1. HADOOP最早起源于Nutch.Nutch的设计目标是构建一个大型的全网搜索引擎,包括网页抓取.索引.查询等功能,但随着抓取网页数量的增加, ...
- 【C#日期系列(二)】--C#获取一段时间有多少个星期几
#region 统计一段时间内有多少个星期几 ///<summary> ///统计一段时间内有多少个星期几 ///</summary> ///<param name=&q ...
- 获取对象的key【键】和分别获取数组的key【键】和值
一.先说对象,如何获取key[键]: var obj={ name:"websong", qq:289483936 } 想要获取这个obj对象的键“name”和"qq&q ...
- Centos7中一次性安装开发者工具
这里使用组安装包,一次性安装所有开发者工具. 1.查看有那些组安装包可用. yum grouplist | more 2.搜索一下有哪些和development有关. yum grouplist | ...
- 在Linux中设置UMASK值
umask值用于设置用户在创建文件时的默认权限,当我们在系统中创建目录或文件时,目录或文件所具有的默认权限就是由umask值决定的. 对于root用户,系统默认的umask值是0022:对于普通用户, ...
- 转:Meltdown Proof-of-Concept
转:https://github.com/IAIK/meltdown Meltdown Proof-of-Concept What is the difference between Meltdown ...
- [Codeforces995C]Leaving the Bar 瞎搞
大致题意: 给出平面上n个向量,对于每个向量可以选择正的V或负的-V,求按照选择的向量走完,最后距离原点<=1.5*1e6的一个选择方案 非正解!!!!!!!!!! 先按距离原点距离由远到近贪心 ...
- Ocelot网关统一查看多个微服务asp.net core项目的swagger API接口
0.前言 整体架构目录:ASP.NET Core分布式项目实战-目录 一.准备 前提需要下载安装consul,项目需要懂添加swagger 统一在网关中配置多个微服务的swagger,需要用到服务注册 ...