一个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; ...
随机推荐
- Java学习(if wihle switch for语句)
一.if语句 定义:if语句是指如果满足某种条件,就进行某种处理. 语句: if (条件语句){ 执行语句; …… } 上述格式中,判断条件是一个布尔值,当判断条件为true时,{}中的执行语句才会执 ...
- [实战]MVC5+EF6+MySql企业网盘实战(25)——种子列表
写在前面 上篇文章实现了视频列表,本篇文章继续实现其他的文件列表.功能相似.这里就不再赘述. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MyS ...
- KVM调整cpu和内存
一.修改kvm虚拟机的配置 1.virsh edit centos7 找到“memory”和“vcpu”标签,将 <name>centos7</name> <uuid&g ...
- asp.net form 验证方式的使用(转载)
如何运用 Form 表单认证 ASP.NET 的安全认证,共有“Windows”“Form”“Passport”“None”四种验证模式.“Windows”与“None”没有起到保护的作用,不推荐使用 ...
- 长安大学第四届ACM-ICPC“迎新杯”程序设计竞赛-重现赛 G - 彩虹岛套娃
题目描述 俄罗斯套娃是俄罗斯特产的木制玩具,一般由多个一样图案的空心木娃娃一个套一个组成,最多可达十多个,通常为圆柱形,底部平坦可以直立.颜色有红色,蓝色,绿色,紫色等.最普通的图案是一个穿着俄罗斯民 ...
- CodeForcs 797E Array Queries
$dp$预处理,暴力. 如果$k > sqrt(n)$,那么答案不会超过$sqrt(n)$,暴力模拟即可.如果$k <= sqrt(n)$,那么可以$dp$预处理打表. #include ...
- Centos 7 mysql 安装使用记
某次把美团云1G 1核 centos 7 装到死机,明白了源码编译安装mysql是个大坑,遂绕路到其他大道. 安装命令 wget http://dev.mysql.com/get/mysql-comm ...
- Tweet信息搜集工具tinfoleak
Tweet信息搜集工具tinfoleak 推特是国外用户常用的社交网站.通过分析用户发布的推文以及社交活动,可以获取大量的个人信息.Kali Linux新增一款Tweet信息搜索工具tinfole ...
- ubuntu16.04系统上安装CAJViewer方法步骤教程详解
下载链接: http://pan.baidu.com/s/1jIqHxLs 或: http://download.csdn.net/detail/arhaiyun/5457947 安装wine1.6: ...
- FastReport.Net使用:[15]富文本控件使用
富文本(Rich Text)控件用于显示Rtf格式的文本. 认识富文本编辑窗体 1.下图就是富文本的编辑窗体,乍一看就像Word一样,不过功能没有Word强大了.具体功能就不一一介绍了,用个Word的 ...