java javaScript实现遮罩层 动态加载
通过java、JavaScript和css实现点击按钮后出现灰色遮罩层,并显示动态加载的字样,提高用户体验,废话不多说,上代码(写这个博客的原因是网上代码太多新手根本不知道哪里对哪里,这里剔除所有无关代码,只显示可以出现功能的最少代码)。
第一:效果图为
第二:实现如上效果的代码为
1:遮罩层css代码
<style type="text/css">
#load{position:fixed; top: 0px; right:0px; bottom:0px;filter: alpha(opacity=60); background-color: #777;
z-index: 1002; left: 0px; display:none;
opacity:0.5; -moz-opacity:0.5;padding-top:100px;color: #000000}
</style>
2:加载中div
<div id="load" align="center"><img src="data:images/loading.gif" width="28" height="28" align="absmiddle"/>加载中...</div>
3:触发遮罩效果的按钮
<input id="btnSubmit" name="btnSubmit" type="button" value="加载" onclick="updateResult();" />
4:界面初始化js,使得遮罩层效果在界面加载时被隐藏
$(document).ready(function() { $('#load').hide(); });
5:点击加载按钮,触发遮罩层效果显示,加载数据完成在退出效果
$('#load').fadeIn();
$('#load').fadeOut();
最后附上实现该效果的loading.gif图,如有需要尽可下载使用:
java javaScript实现遮罩层 动态加载的更多相关文章
- Java从Jar文件中动态加载类
动态加载jar包,在实际开发中经常会需要用到,尤其涉及平台和业务的关系的时候,业务逻辑部分可以独立出去交给业务方管理,业务方只需要提供jar包,就能在平台上运行. 下面通过一个实例来直观演示: 第一: ...
- JavaScript(第二十二天)【动态加载js和css】
学习要点: 1.元素位置 2.动态脚本 3.动态样式 本章主要讲解上一章剩余的获取位置的DOM方法.动态加载脚本和样式. 一.元素位置 上一章已经通过几组属性可以获取元素所需的位置,那么这节课补充 ...
- 简单的ajax遮罩层(加载进度圈)cvi_busy_lib.js
cvi_busy_lib.js cvi_busy_lib.js 是一个基于ajax的遮罩js,遮罩区域为body区域.使用比较简单. 效果: 在下面的Js代码,标注为红色标记为需要设置的参数. 1.g ...
- html中的数据岛:利用DSO和javascript在html中动态加载和浏览xml数据
1.DSO也叫做数据源对象,IE 4.0引入了DSO,在IE 5.0对DSO技术进行很大的扩展.以往如果数据是通过SQL语言对数据库进行查询得到的结果,那么就把它们存放在ADO(ActiveX Dat ...
- 页面用一个遮罩层显示加载,加载完后隐藏该div
<div id="background" class="background" style="display: none; "> ...
- JavaScript动态加载CSS和JS文件
var dynamicLoading = { css: function(path){ if(!path || path.length === 0){ throw new Error('argumen ...
- Java动态加载类
详见:https://blog.csdn.net/zai_xia/article/details/80026325 扩展:java反射机制与动态加载类 https://www.cnblogs.com/ ...
- 反射01 Class类的使用、动态加载类、类类型说明、获取类的信息
0 Java反射机制 反射(Reflection)是 Java 的高级特性之一,是框架实现的基础. 0.1 定义 Java 反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对 ...
- EasyUI datagrid动态加载json数据
最近做一个项目,要求是两张张表可能查找出10多种不同的结果集. 如果想只用一个表格就把全部的结果不同的显示出来那么就肯定不同使用固定的字段名字,要通过动态加载后台返回来的数据把它显示出来就必须动态加载 ...
随机推荐
- 一键强制修改任意Mysql数据库的密码,修改任意环境Mysql数据库。
本文采用我软件里面的内置改密功能,可以一键强制修改Mysql数据库的密码, 在修改过程中,会强制干掉Mysql主程序,修改完成后重新启动Mysql就可以了. 首先讲解如何一键强制修改PHPWAMP自身 ...
- How to use dt.Rows.Cast<System.Data.DataRow>().Take(n)
参考文章:http://stackoverflow.com/questions/2787458/how-to-select-top-n-rows-from-a-datatable-dataview-i ...
- RPC 框架原理详解
首先了解什么叫RPC,为什么要RPC,RPC是指远程过程调用?也就是说两台服务器A,B,一个应用部署在A服务器上,想要调用B服务器上应用提供的函数/方法,由于不在一个内存空间,不能直接调用,需要通过网 ...
- ios版本更新总结
更新思路,获取APP Store 版本号与项目本地版本号对比,如果本地低于商店版本号,就提示用户更新(说明:在上架项目时请保持本地和商店版本号一致,避免检测更新问题被拒) 1.获取商店版本号,代码如下 ...
- html css jquery 回到顶部按钮
今天做了个回到顶部的功能,在这里记录一下,有需要可以拿去试试! CSS部分,很简单就一个class /*回到顶部*/ .back-top { position: fixed; right: 15px; ...
- Centos 7 系统安装完毕修改网卡名为eth0
从CentOS/RHEL7起,可预见的命名规则变成了默认.这一规则,接口名称被自动基于固件,拓扑结构和位置信息来确定.现在,即使添加或移除网络设备,接口名称仍然保持固定,而无需重新枚举,和坏掉的硬件可 ...
- NGINX----源码阅读----(option配置脚本)
/auto/options options文件主要负责nginx启动前配置脚本对环境变量初始化. 1.默认为环境变量赋值 help=no NGX_PREFIX= NGX_SBIN_PATH= NGX_ ...
- mimi
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- hdu 3006 The Number of set
二进制的状态压缩.比如A集合里面有{1,5,7}那么就表示为1010001.B集合有{3,4},二进制表示1100.A|B=1011101. 按照这样的思路 可以用01背包 把所有的组合全部求出来. ...
- http&https&证书&数字签名
http协议 http是超文本传输协议,是用来网络间传输数据.底层是tcp协议(传输控制协议). 是一种面向连接的主机对主机层的可靠传输,这里的可靠是指数据丢失极小.Tcp建立一次连接需要经过3次握手 ...