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 拾碎[三] 使用className属性
Oct 16 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
May 07 Javascript
JavaScript cookie的设置获取删除详解
Feb 11 Javascript
ie浏览器使用js导出网页到excel并打印
Mar 11 Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 Javascript
Jqgrid之强大的表格插件应用
Dec 02 Javascript
angularjs 中$apply,$digest,$watch详解
Oct 13 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
javascript 数据存储的常用函数总结
Jun 01 Javascript
JQuery 又谈ajax局部刷新
Nov 27 jQuery
微信小程序自定义toast实现方法详解【附demo源码下载】
Nov 28 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
Sep 10 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&amp;&amp;mysql)四
2006/10/09 PHP
深入了解php4(2)--重访过去
2006/10/09 PHP
PHP4与PHP5的时间格式问题
2008/02/17 PHP
php 在线打包_支持子目录
2008/06/28 PHP
解析PHP缓存函数的使用说明
2013/05/10 PHP
php使用gzip压缩传输js和css文件的方法
2015/07/29 PHP
PHP类型约束用法示例
2016/09/28 PHP
PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】
2018/12/25 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
JS控制GIF图片的停止与显示
2019/10/24 Javascript
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
Python实现矩阵加法和乘法的方法分析
2017/12/19 Python
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
Python实现的多进程和多线程功能示例
2018/05/29 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
django创建简单的页面响应实例教程
2019/09/06 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
计算机专业自荐信
2013/10/14 职场文书
求职信的要素有哪些呢
2013/12/26 职场文书
主管会计岗位职责
2014/03/13 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
2014年小学生教师节演讲稿范文
2014/09/10 职场文书
人生遥控器观后感
2015/06/11 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
5分钟教你docker安装启动redis全教程(全新方式)
2021/05/29 Redis
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript