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跑马灯悬停放大效果实现代码
Dec 12 Javascript
javascript ajax 仿百度分页函数
Oct 29 Javascript
根据表格中的某一列进行排序的javascript代码
Nov 29 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
jquery获取radio值(单选组radio)
Oct 16 Javascript
jquery+php实现搜索框自动提示
Nov 28 Javascript
javascript截取字符串小结
Apr 28 Javascript
js实现向右横向滑出的二级菜单效果
Aug 27 Javascript
javascript常用经典算法详解
Jan 11 Javascript
激动人心的 Angular HttpClient的源码解析
Jul 10 Javascript
深入了解JavaScript代码覆盖
Jun 13 Javascript
微信小程序 网络通信实现详解
Jul 23 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最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
php购物网站支付paypal使用方法
2010/11/28 PHP
PHP及Zend Engine的线程安全模型分析
2011/11/10 PHP
真正根据utf8编码的规律来进行截取字符串的函数(utf8版sub_str )
2012/10/24 PHP
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
AngularJS过滤器filter用法总结
2016/12/13 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
2017/03/03 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
2019/09/05 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
2020/03/10 Javascript
Vant picker 多级联动操作
2020/11/02 Javascript
python基础教程之实现石头剪刀布游戏示例
2014/02/11 Python
python实现的系统实用log类实例
2015/06/30 Python
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
python按比例随机切分数据的实现
2019/07/11 Python
使用Pyinstaller转换.py文件为.exe可执行程序过程详解
2019/08/06 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
Python读取YAML文件过程详解
2019/12/30 Python
selenium 多窗口切换的实现(windows)
2020/01/18 Python
在django中form的label和verbose name的区别说明
2020/05/20 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
《美丽的小路》教学反思
2014/02/26 职场文书
关于感恩的演讲稿800字
2014/08/26 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
小学生节约用水倡议书
2019/08/12 职场文书
导游词之四川武侯祠
2019/10/21 职场文书
Nginx图片服务器配置之后图片访问404的问题解决
2022/03/21 Servers