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 类型判断代码分析
Mar 28 Javascript
通过Javascript读取本地Excel文件内容的代码示例
Apr 08 Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 Javascript
JavaScript 数组some()和filter()的用法及区别
May 20 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 Javascript
jQuery操作css样式
May 15 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
JavaScript中的相等操作符使用详解
Dec 21 Javascript
JavaScript console的使用方法实例分析
Apr 28 Javascript
基于JS实现视频上传显示进度条
May 12 Javascript
VUE实时监听元素距离顶部高度的操作
Jul 29 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中文乱码
2009/11/26 PHP
php 利用socket发送HTTP请求(GET,POST)
2015/08/24 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
js获取单选框或复选框值及操作
2012/12/18 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
javascript学习笔记(六)数据类型和JSON格式
2014/10/08 Javascript
限制上传文件大小和格式的jQuery插件实例
2015/01/24 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
通过原生JS实现为元素添加事件的方法
2016/11/23 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
jquery 遍历hash操作示例【基于ajax交互】
2019/10/12 jQuery
js实现简单的秒表
2020/01/16 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
JavaScript对象字面量和构造函数原理与用法详解
2020/04/18 Javascript
js代码实现轮播图
2020/05/04 Javascript
Python 学习笔记
2008/12/27 Python
python求众数问题实例
2014/09/26 Python
用Python编写脚本使IE实现代理上网的教程
2015/04/23 Python
Python操作串口的方法
2015/06/17 Python
python从入门到精通(DAY 2)
2015/12/20 Python
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
英国排名第一的餐具品牌:Denby Pottery
2019/11/01 全球购物
教师的实习自我鉴定
2013/12/17 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
基于Golang 高并发问题的解决方案
2021/05/08 Golang
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技