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 相关文章推荐
JS中的prototype与面向对象的实例讲解
May 22 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
Jul 04 Javascript
jQuery jcrop插件截图使用方法
Nov 20 Javascript
Javascript中引用示例介绍
Feb 21 Javascript
jquery实现的美女拼图游戏实例
May 04 Javascript
JavaScript中eval()函数用法详解
Dec 14 Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
Sep 04 Javascript
JQuery遍历元素的父辈和祖先的方法
Sep 18 Javascript
JS+CSS实现下拉刷新/上拉加载插件
Mar 31 Javascript
在vue项目中封装echarts的步骤
Dec 25 Vue.js
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
Win下如何安装PHP的APC拓展
2013/08/07 PHP
php提高网站效率的技巧
2015/09/29 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
js实时获取系统当前时间实例代码
2013/06/28 Javascript
Javascript变量作用域详解
2013/12/06 Javascript
JavaScript面向对象编程入门教程
2014/04/16 Javascript
浅谈页面装载js及性能分析方法
2014/12/09 Javascript
jquery事件的ready()方法使用详解
2015/11/11 Javascript
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
仅30行代码实现Javascript中的MVC
2016/02/15 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
浅谈微信小程序flex布局基础
2018/09/10 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
python3库numpy数组属性的查看方法
2018/04/17 Python
python 队列基本定义与使用方法【初始化、赋值、判断等】
2019/10/24 Python
Python中内建模块collections如何使用
2020/05/27 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
介绍一下OSI七层模型
2012/07/03 面试题
大学生职业生涯规划书参考模板
2014/03/05 职场文书
环境建设实施方案
2014/03/14 职场文书
商务经理岗位职责
2014/07/30 职场文书
2014年安全员工作总结
2014/11/13 职场文书
Oracle数据库事务的开启与结束详解
2022/06/25 Oracle
Java代码规范与质量检测插件SonarLint的使用
2022/08/05 Java/Android