Javascript 遮罩层和加载效果代码


Posted in Javascript onAugust 01, 2013
 //loading
function showLoad(tipInfo) {
var iWidth = 120; //弹出窗口的宽度;
var iHeight = 0; //弹出窗口的高度;
var scrolltop = 0;
var scrollleft = 0;
var cheight = 0;
var cwidth = 0;
var eTip = document.createElement('div');
eTip.setAttribute('id', 'tipDiv');
eTip.style.position = 'absolute';
eTip.style.display = 'none';
eTip.style.border = 'solid 0px #D1D1D1';
eTip.style.backgroundColor = '#4B981D';
eTip.style.padding = '5px 15px';
if(document.body.scrollTop){//这是一个js的兼容
scrollleft=document.body.scrollLeft;
scrolltop=document.body.scrollTop;
cheight=document.body.clientHeight;
cwidth=document.body.clientWidth;
}
else{
scrollleft=document.documentElement.scrollLeft;
scrolltop=document.documentElement.scrollTop;
cheight=document.documentElement.clientHeight;
cwidth=document.documentElement.clientWidth;
}
iHeight = eTip.offsetHeight;
var v_left=(cwidth-iWidth)/2 + scrollleft; //
var v_top=(cheight-iHeight)/2+ scrolltop;
eTip.style.left = v_left + 'px';
eTip.style.top = v_top + 'px';
eTip.innerHTML = '<img src='Images/loading.gif' style='float:left;' /> <span style='color:#ffffff; font-size:12px'>' + tipInfo + '</span>';
try {
document.body.appendChild(eTip);
} catch (e) { }
$("#tipDiv").css("float", "right");
$("#tipDiv").css("z-index", "99");
$('#tipDiv').show();
ShowMark();
}
function closeLoad() {
$('#tipDiv').hide();
HideMark();
}
//显示蒙灰层
function ShowMark() {
var xp_mark = document.getElementById("xp_mark");
if (xp_mark != null) {
//设置DIV
xp_mark.style.left = 0 + "px";
xp_mark.style.top = 0 + "px";
xp_mark.style.position = "absolute";
xp_mark.style.backgroundColor = "#000";
xp_mark.style.zIndex = "1";
if (document.all) {
xp_mark.style.filter = "alpha(opacity=50)";
var Ie_ver = navigator["appVersion"].substr(22, 1);
if (Ie_ver == 6 || Ie_ver == 5) { hideSelectBoxes(); }
}
else { xp_mark.style.opacity = "0.5"; }
xp_mark.style.width = "100%";
xp_mark.style.height = "100%";
xp_mark.style.display = "block";
}
else {
//页面添加div explainDiv,注意必须是紧跟body 内的第一个元素.否则IE6不正常.
$("body").prepend("<div id='xp_mark' style='display:none;'></div>");
ShowMark(); //继续回调自己
}
}
//隐藏蒙灰层
function HideMark() {
var xp_mark = document.getElementById("xp_mark");
xp_mark.style.display = "none";
var Ie_ver = navigator["appVersion"].substr(22, 1);
if (Ie_ver == 6 || Ie_ver == 5) { showSelectBoxes(); }
}
Javascript 相关文章推荐
在html页面中包含共享页面的方法
Oct 24 Javascript
javascript中return,return true,return false三者的用法及区别
Nov 17 Javascript
js选择器全面解析
Jun 27 Javascript
浅谈Cookie的生命周期问题
Aug 02 Javascript
详解微信小程序 登录获取unionid
Jun 27 Javascript
基于JavaScript实现弹幕特效
Aug 27 Javascript
Vue2.0系列之过滤器的使用
Mar 01 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
Nov 02 Javascript
防止Layui form表单重复提交的实现方法
Sep 10 Javascript
原生JavaScript写出Tabs标签页的实例代码
Jul 20 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
JS数组去重详情
Nov 07 Javascript
JS防止用户多次提交的简单代码
Aug 01 #Javascript
纯文字版返回顶端的js代码
Aug 01 #Javascript
JS实现随机化快速排序的实例代码
Aug 01 #Javascript
js中的前绑定和后绑定详解
Aug 01 #Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
Aug 01 #Javascript
jquery实现带复选框的表格行选中删除时高亮显示
Aug 01 #Javascript
JQuery的自定义事件代码,触发,绑定简单实例
Aug 01 #Javascript
You might like
简单的用PHP编写的导航条程序
2006/10/09 PHP
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
php读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
PHP持久连接mysql_pconnect()函数使用介绍
2012/02/05 PHP
php中动态修改ini配置
2014/10/14 PHP
php基于mcrypt的加密解密实例
2014/10/27 PHP
thinkphp特殊标签用法概述
2014/11/24 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
PHP+jQuery实现双击修改table表格功能示例
2019/02/21 PHP
js 设置选中行的样式的实现代码
2010/05/24 Javascript
来自国外的14个图片放大编辑的jQuery插件整理
2010/10/20 Javascript
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
Jquery动态添加及删除页面节点元素示例代码
2014/06/16 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
JavaScript变量作用域_动力节点Java学院整理
2017/06/27 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
2019/04/28 jQuery
关于vue组件事件属性穿透详解
2019/10/28 Javascript
微信小程序实现日历签到
2020/09/21 Javascript
[01:29]2014DOTA2展望TI 剑指西雅图DK战队专访
2014/06/30 DOTA
[53:52]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
python解释器spython使用及原理解析
2019/08/24 Python
Python爬虫解析网页的4种方式实例及原理解析
2019/12/30 Python
python dumps和loads区别详解
2020/02/04 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
用python进行视频剪辑
2020/11/02 Python
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
New Balance德国官方网站:购买鞋子和服装
2019/08/31 全球购物
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
大专毕业生求职信
2014/07/05 职场文书
法定代表人证明书
2014/11/28 职场文书
《和时间赛跑》读后感3篇
2019/12/16 职场文书
Python之matplotlib绘制饼图
2022/04/13 Python