一个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; ...
随机推荐
- 小甲鱼Python笔记(类)
类和对象 类的构造方法 def __init__(): 1 class People: 2 def __init__(self,name): 3 self.name = name 注意:在构造方法中的 ...
- javax.persistence.EntityNotFoundException: Unable to find报错
这类错id 可能是10,可能是27,也可能是其他数字 错误描述: javax.persistence.EntityNotFoundException: Unable to find 某个类 with ...
- asp.net传多个值到其它页面的方法
网站开发中,在页面之间的跳转,经常会用到传值,其中可能会传递多个值. 一.CommadArgument传多个值到其他页面. 像Gridview dataList repeater等数据绑定控件中,可以 ...
- [I/O]javaI/O工作机制
摘要:IO问题可以说是当今web应用中面临的主要问题之一.因为在这个数据爆发的时代,海量的数据在网络到处流动,而在这个过程中都会涉及IO问题,可以说IO问题已经成为web应用的瓶颈之一.如何优化?以此 ...
- Mybatis 源码分析之一二级缓存
一级缓存 其实关于 Mybatis 的一级缓存是比较抽象的,并没有什么特别的配置,都是在代码中体现出来的. 当调用 Configuration 的 newExecutor 方法来创建 executor ...
- here with you
Here With You - Asher Book To all my friends对我所有好友来讲The night is young夜未央The music's loud乐未殇They pla ...
- 缩略图信息提取工具vinetto
缩略图信息提取工具vinetto 在Windows操作系统中,为了方便用户快速浏览图片,系统会自动为每个图片生成预览图.预览图默认保存在同目录的Thumbs.db文件中.当图片文件删除后,Thum ...
- 【UOJ #204】【APIO 2016】Boat
http://uoj.ac/problem/204 肯定要离散化的,先离散化出\(O(n)\)个取值区间. 设\(f(i,j)\)表示第\(i\)所学校派出的划艇数量在\(j\)区间中. \(f(i, ...
- 我的OI生涯 第三章
第三章 日子过得就像那些不眠的晚上,她嚼着口香糖对墙满谈着理想.——————赵雷<成都> NOIP过后我认识到了自己有多么菜,我换了座,到了靠窗户那排. 大王开始给我们介绍一些高端算法,那 ...
- 【bzoj1875】【JZYZOJ1354】[SDOI2009]HH去散步 矩阵快速幂 点边转换
http://172.20.6.3/Problem_Show.asp?id=1354 http://www.lydsy.com/JudgeOnline/problem.php?id=1875 题意: ...