js 遮罩层 loading 效果

//调用方法

//关闭事件<button οnclick='LayerHide()'>关闭</button>,在loadDiv(text)中,剔除出来

//调用LayerShow(text),text为参数,可以写入想要写入的提示语

//本方法在调用时会自动生成一个添加到body的div,并且会在调用隐藏遮罩层 LayerHide()时删除div

//封装遮罩层div显示效果

//将其放在页面的div中加载

 

function loadDiv(text) {var div = "<div id='_layer_'> <div id='_MaskLayer_' style='filter: alpha(opacity=30); -moz-opacity: 0.3; opacity: 0.3;background-color: #000; width: 100%; height: 100%; z-index: 1000; position: absolute;" +                 "left: 0; top: 0; overflow: hidden; display: none'></div><div id='_wait_' style='z-index: 1005; position: absolute; width:430px;height:218px; display: none'  ><center><h3>" +                 "" + text + "<img src='../images/loading.gif' /></h3><button οnclick='LayerHide()'>关闭</button></center></div></div>"; return div; 
}

 

//触发遮罩层

function LayerShow(text) {var addDiv= loadDiv(text);  var element = $("#" + addDiv).appendTo(document.body);     $(window).resize(Position);  var deHeight = $(document).height();    var deWidth = $(document).width();    Position();     
$("#_MaskLayer_").show();   $("#_wait_").show();} 

 

//获取相对位置

 function Position() {  $("#_MaskLayer_").width($(document).width());   var deHeight = $(window).height();     var deWidth = $(window).width();     $("#_wait_").css({ left: (deWidth - $("#_wait_").width()) / 2 + "px", top: (deHeight - $("#_wait_").height()) / 2 + "px" }); 
}

 

//隐藏遮罩层

 function LayerHide() { $("#_MaskLayer_").hide(); $("#_wait_").hide(); del(); 
}

 

//清空div,避免产生重复

 function del() { var delDiv = document.getElementById("_layer_");     delDiv.parentNode.removeChild(delDiv); //删除 }

 

转载于:https://www.cnblogs.com/WangJinYang/archive/2012/10/09/2716965.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/377167.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

centos6.5安装配置LDAP服务[转]

centos6.5安装配置LDAP服务[转] 安装之前查一下 1find / -name openldap*centos6.4默认安装了LDAP&#xff0c;但没有装ldap-server和ldap-client 于是yum安装 1su root2yum install -y openldap openldap-servers openldap-clients不建议编译源码包&#xff0c;有依赖比较麻烦…

《MySQL——恢复数据-误删行、表、库》

目录误删行事前预防误删行数据方法误删表/库延迟复制备库事前预防误删库/表方法传统的架构不能预防误删数据&#xff0c;因为主库的一个drop table命令&#xff0c;会通过binlog传给所有从库和级联从库&#xff0c;进而导致整个集群的实例都会执行这个命令。 MySQL相关的误删除…

python图例位置_Python | 图例位置

python图例位置Legends are one of the key components of data visualization and plotting. Matplotlib can automatically define a position for a legend in addition to this, it allows us to locate it in our required positions. Following is the list of locations…

Freemarker中遍历List实例

Freemarker中如何遍历List摘要&#xff1a;在Freemarker应用中经常会遍历List获取需要的数据&#xff0c;并对需要的数据进行排序加工后呈现给用户。那么在Freemarker中如何遍历List&#xff0c;并对List中数据进行适当的排序呢&#xff1f;通过下文的介绍&#xff0c;相信您一…

工作总结:文件对话框的分类(C++)

原文地址&#xff1a;http://www.jizhuomi.com/software/173.html 文件对话框分为打开文件对话框和保存文件对话框&#xff0c;相信大家在Windows系统中经常见到这两种文件对话框。例如&#xff0c;很多编辑软件像记事本等都有“打开”选项&#xff0c;选择“打开”后会弹出一个…

《MySQL——Innodb改进LRU算法》

Innodb改进LRU.算法&#xff0c;实质上将内存链表分成两段。 靠近头部的young和靠近末尾的old&#xff0c;取5/12段为分界。 新数据在一定时间内只能在old段的头部&#xff0c;当在old段保持了一定的时间后被再次访问才能升级到young。 实质上是分了两段lru&#xff0c;这样做的…

nfc/nfc模式_NFC的完整形式是什么?

nfc/nfc模式NFC&#xff1a;没有进一步评论 (NFC: No Further Comment) NFC is an abbreviation of "No Further Comment". NFC是“没有进一步评论”的缩写 。 It is an expression, which is commonly used in messaging or chatting on social media networking s…

dx小记(2)

1.构造一个平截台体&#xff08;Frustum&#xff09; 最近距离-projMatirx.43/projMatrix.33 projMatrix。33 深度/&#xff08;深度-最近距离&#xff09; projMatrix。44-最近距离*&#xff08;深度/&#xff08;深度-最近距离&#xff09;&#xff09; FrustumMatrix proje…

jQuery: 整理4---创建元素和添加元素

1.创建元素&#xff1a;$("内容") const p "<p>这是一个p标签</p>" console.log(p)console.log($(p)) 2. 添加元素 2.1 前追加子元素 1. 指定元素.prepend(内容) -> 在指定元素的内部的最前面追加内容&#xff0c;内容可以是字符串、…

Design a high performance cache for multi-threaded environment

如何设计一个支持高并发的高性能缓存库 不 考虑并发情况下的缓存的设计大家应该都比较清楚&#xff0c;基本上就是用map/hashmap存储键值&#xff0c;然后用双向链表记录一个LRU来用于缓存的清理。这篇文章 应该是讲得很清楚http://timday.bitbucket.org/lru.html。但是考虑到高…

《MySQL——join语句优化tips》

目录要不要用joinJoin驱动表选择Multi-Range Read优化Batched Key Access &#xff08;BKA&#xff09;对NLJ进行优化BNL算法性能问题BNL转BKA要不要用join 1、如果使用的是Index Nested-Loop Join算法&#xff0c;即可以用上被驱动表的索引&#xff0c;可以用 2、如果使用的…

scala中抽象类_Scala中的抽象类

scala中抽象类抽象类 (Abstract Class) In the Scala programming language, abstraction is achieved using abstract class. 在Scala编程语言&#xff0c; 抽象是使用抽象类来实现的。 Abstraction is the process of showing only functionality and hiding the details fr…

不能catch Fatal的exception

Clemens Vasters - Are you catching falling knives?里给了一个判断C#的exception是不是fatal的代码&#xff0c;可以参考参考。 public static bool IsFatal(this Exception exception) {while (exception ! null){if (exception as OutOfMemoryException ! null &&…

HDU 2824 The Euler function

筛法计算欧拉函数 #include <iostream> #include <cstdio> using namespace std; const int maxn3000005; long long phi[maxn]; int main(){int i,j,a,b;for(i1;i<maxn;i) phi[i]i;for(i2;i<maxn;i2) phi[i]/2;for(i3;i<maxn;i2)if(phi[i]i){for(ji;j<…

LinkChecker 8.1 发布,网页链接检查

LinkChecker 8.1 可对检查时间和最大的 URL 数量进行配置&#xff1b;当使用 HTTP 请求时发送 do-not-track 头&#xff1b;生成 XML 的 sitemap 用于搜索引擎优化&#xff1b;检测 URL 长度和重复的页面内容&#xff1b;修复了很多检查的 bug。 LinkChecker 是一个网页链接检查…

c语言语言教程0基础_C语言基础

c语言语言教程0基础Hey, Folks here I am back with my second article on C language. Hope you are through with my previous article C language - History, Popularity reasons, Characteristics, Basic structure etc. In this one, I will cover some fundamental conce…

《MySQL——临时表》

内存表与临时表区别 临时表&#xff0c;一般是人手动创建。 内存表&#xff0c;是mysql自动创建和销毁的。 内存表&#xff0c;指的是使用Memory引擎的表&#xff0c;建表语法&#xff1a;create table ... engine memeory 表的数据存在内存里&#xff0c;系统重启后会被清…

android中ActionBar的几个属性

actionBar.setHomeButtonEnabled //小于4.0版本的默认值为true的。但是在4.0及其以上是false&#xff0c;该方法的作用&#xff1a;决定左上角的图标是否可以点击。没有向左的小图标。 true 图标可以点击 false 不可以点击。 actionBar.setDisplayHomeAsUpEnabled(true) //…

drei

模拟9 T3 &#xff08;COGS上也有&#xff0c;链接http://218.28.19.228/cogs/problem/problem.php?pid1428&#xff09; 题目描述 输入a&#xff0c;p&#xff0c;求最小正整数x&#xff0c;使得a^x mod p 1。 分析 神奇的欧拉定理&#xff08;对于gcd&#xff08;a&#xf…

《MySQL——group by使用tips》

1、如果对group by语句结果没有排序要求&#xff0c;在语句后面加order by null 2、尽量让group by 过程用上索引&#xff0c;确认方法是explain结果里没有Using temporary 和Using filesort 3、如果group by 需要统计的数据量不大&#xff0c;尽量只使用内存临时表&#xff…