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 innerHTML 改变div内容的方法
Aug 03 Javascript
Jquery实现的一种常用高亮效果示例代码
Jan 28 Javascript
js图片模糊切换显示特效的方法
Feb 17 Javascript
JavaScript中的pow()方法使用详解
Jun 15 Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
Nov 02 Javascript
解决浏览器会自动填充密码的问题
Apr 28 Javascript
微信小程序中input标签详解及简单实例
May 18 Javascript
常用的9个JavaScript图表库详解
Dec 19 Javascript
Node.js搭建小程序后台服务
Jan 03 Javascript
vue和webpack项目构建过程常用的npm命令详解
Jun 15 Javascript
layer 刷新某个页面的实现方法
Sep 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
php gd2 上传图片/文字水印/图片水印/等比例缩略图/实现代码
2010/05/15 PHP
linux iconv方法的使用
2011/10/01 PHP
强制PHP命令行脚本单进程运行的方法
2014/04/15 PHP
数组任意位置插入元素,删除特定元素的实例
2017/03/02 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
再谈javascript 动态添加样式规则 W3C校检
2009/12/25 Javascript
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
轻松实现JavaScript图片切换
2016/01/12 Javascript
深入理解JavaScript中的预解析
2017/01/04 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
基于vue2.x的电商图片放大镜插件的使用
2018/01/22 Javascript
微信小程序页面生命周期详解
2018/01/31 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
AutoJs实现刷宝短视频的思路详解
2020/05/22 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
Python本地与全局命名空间用法实例
2015/06/16 Python
Python自定义简单图轴简单实例
2018/01/08 Python
Django中间件工作流程及写法实例代码
2018/02/06 Python
python实现自主查询实时天气
2018/06/22 Python
详解python中list的使用
2019/03/15 Python
Form表单及django的form表单的补充
2019/07/25 Python
HTML5的革新 结构之美
2011/06/20 HTML / CSS
Europcar西班牙:全球汽车租赁领域的领导者
2018/09/17 全球购物
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
业务经理的岗位职责
2013/11/16 职场文书
公司财务总监岗位职责
2013/12/14 职场文书
家长给小学生的评语
2014/01/30 职场文书
法律系毕业生自荐信范文
2014/03/27 职场文书
2015年父亲节活动总结
2015/02/12 职场文书
给病人的慰问信
2015/03/23 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
小学三年级作文之写景
2019/11/05 职场文书
react国际化react-intl的使用
2021/05/06 Javascript
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电