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 相关文章推荐
使用Modello编写JavaScript类
Dec 22 Javascript
setInterval,setTimeout与jquery混用的问题
Apr 08 Javascript
深入理解javascript中defer的作用
Dec 11 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
Oct 25 Javascript
jQuery页面弹出框实现文件上传
Feb 09 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
Feb 20 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
Jul 31 Javascript
node内置调试方法总结
Feb 22 Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
JS中的变量作用域(console版)
Jul 18 Javascript
js实现随机圆与矩形功能
Oct 29 Javascript
Vue多选列表组件深入详解
Mar 02 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
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
php addslashes 函数详细分析说明
2009/06/23 PHP
php 分库分表hash算法
2009/11/12 PHP
php仿QQ验证码的实例分析
2013/07/01 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
PHP模拟post提交数据方法汇总
2016/02/16 PHP
JavaScript判断窗口是否最小化的代码(跨浏览器)
2010/08/01 Javascript
JavaScript 代码压缩工具小结
2012/02/27 Javascript
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
解析JavaScript中的标签语句
2013/06/19 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
IE浏览器中图片onload事件无效的解决方法
2014/04/29 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
Jquery实现顶部弹出框特效
2015/08/08 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
2016/12/17 Javascript
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
2019/08/17 Javascript
VUE项目初建和常见问题总结
2019/09/12 Javascript
vue实现从外部修改组件内部的变量的值
2020/07/30 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
Python chardet库识别编码原理解析
2020/02/18 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
使用Python封装excel操作指南
2021/01/29 Python
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
伊索寓言教学反思
2014/05/01 职场文书
学校先进集体事迹材料
2014/05/31 职场文书
会计稽核岗位职责
2015/04/13 职场文书
2015年学生资助工作总结
2015/05/25 职场文书
Python matplotlib可视化之绘制韦恩图
2022/02/24 Python