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 相关文章推荐
JavaScript中清空数组的三种方法分享
Apr 07 Javascript
js中关于String对象的replace使用详解
May 24 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
Feb 27 Javascript
js获取json元素数量的方法
Jan 27 Javascript
JavaScript转换二进制编码为ASCII码的方法
Apr 16 Javascript
使用jQuery判断浏览器滚动条位置的方法
May 30 Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 Javascript
简单快速的实现js计算器功能
Aug 17 Javascript
vue组件Prop传递数据的实现示例
Aug 17 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 Javascript
Layui数据表格 前后端json数据接收的方法
Sep 19 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中list方法用法示例
2016/12/01 PHP
Aster vs Newbee BO3 第三场2.18
2021/03/10 DOTA
javascript setTimeout和setInterval 的区别
2009/12/08 Javascript
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
javascript函数声明和函数表达式区别分析
2014/12/02 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
JavaScript与jQuery实现的闪烁输入效果
2016/02/18 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
2016/05/11 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
2016/06/24 Javascript
20分钟打造属于你的Bootstrap站点
2016/07/27 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
一道面试题引发的对javascript类型转换的思考
2017/03/06 Javascript
JavaScript使用ZeroClipboard操作剪切板
2017/05/10 Javascript
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
webpack+vue2构建vue项目骨架的方法
2018/01/09 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
2018/01/31 Javascript
Vue Element使用icon图标教程详解(第三方)
2018/02/07 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
2018/09/04 Javascript
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
Python中函数的基本定义与调用及内置函数详解
2019/05/13 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
Python基础之函数原理与应用实例详解
2020/01/03 Python
Python while循环使用else语句代码实例
2020/02/07 Python
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍
2020/02/25 Python
Python学习笔记之装饰器
2020/08/06 Python
zooplus波兰:在线宠物店
2019/07/21 全球购物
西雅图的买手店:Totokaelo
2019/10/19 全球购物
WebSphere 应用服务器都支持哪些认证
2013/12/26 面试题
中专三年学习的个人自我评价
2013/12/12 职场文书
学生手册评语
2014/05/05 职场文书
慈善晚会策划方案
2014/05/14 职场文书
旷课检讨书
2015/01/26 职场文书
银行招聘自荐信
2015/03/06 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
农民工工资支付承诺书
2015/05/04 职场文书