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 相关文章推荐
双击滚屏-常用推荐
Nov 29 Javascript
用js实现控制内容的向上向下滚动效果
Jun 26 Javascript
javascript跨域的4种方法和原理详解
Apr 08 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
JS平滑无缝滚动效果的实现代码
May 06 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
详解React之父子组件传递和其它一些要点
Jun 25 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
Jun 25 Javascript
微信小程序3种位置API的使用方法详解
Aug 05 Javascript
如何基于js判断浏览器版本
Feb 20 Javascript
如何优雅地取消 JavaScript 异步任务
Mar 22 Javascript
前端vue如何使用高德地图
Nov 05 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
咖啡因含量是由谁决定的?低因咖啡怎么来?低因咖啡适合什么人喝
2021/03/06 新手入门
用php实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
PHP 可阅读随机字符串代码
2010/05/26 PHP
PHP解析html类库simple_html_dom的转码bug
2014/05/22 PHP
PHP实现文件下载详解
2014/11/27 PHP
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
js去字符串前后空格5种实现方法及比较
2013/04/03 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
2013/11/14 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
2014/04/04 Javascript
js简单实现点击左右运动的方法
2015/04/10 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
2016/02/26 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
jQuery unbind 删除绑定事件详解
2016/05/24 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
2016/06/22 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
js基本算法:冒泡排序,二分查找的简单实例
2016/10/08 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
Bootstrap实现省市区三级联动(亲测可用)
2019/07/26 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
基于iview-admin实现动态路由的示例代码
2019/10/02 Javascript
Vue+webpack实现懒加载过程解析
2020/02/17 Javascript
[03:22]DAC最前线(第二期)—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
Python创建系统目录的方法
2015/03/11 Python
用python处理MS Word的实例讲解
2018/05/08 Python
Python aiohttp百万并发极限测试实例分析
2019/10/26 Python
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
香港化妆品经销商:我的公主
2016/08/05 全球购物
农行实习自我鉴定
2013/09/22 职场文书
如何客观的进行自我评价
2013/12/17 职场文书
留学推荐信怎么写
2014/01/25 职场文书
旅游管理毕业生自荐信范文
2014/03/19 职场文书
旷课检讨书500字
2014/10/14 职场文书
工作作风建设心得体会
2014/10/22 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server