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 相关文章推荐
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 Javascript
js和C# 时间日期格式转换的简单实例
May 28 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
Aug 19 Javascript
jQuery与JavaScript节点创建方法的对比
Nov 18 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
Dec 23 Javascript
动态Axios的配置步骤详解
Jan 12 Javascript
vue element 生成无线级左侧菜单的实现代码
Aug 21 Javascript
JS代码优化的8点建议
Feb 04 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
May 31 Javascript
详细分析vue表单数据的绑定
Jul 20 Javascript
QT与javascript交互数据的实现
May 26 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数据饼图效果实现代码
2011/11/23 PHP
PHP中批量生成静态html(命令行下运行PHP)
2014/04/19 PHP
php 实现进制相互转换
2016/04/07 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
php删除数组指定元素实现代码
2017/05/03 PHP
图片之间的切换
2006/06/26 Javascript
jquery中ajax学习笔记4
2011/10/16 Javascript
在jQuery ajax中按钮button和submit的区别分析
2012/10/07 Javascript
JS中call/apply、arguments、undefined/null方法详解
2016/02/15 Javascript
Web Uploader文件上传插件使用详解
2016/05/10 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
Python win32com 操作Exce的l简单方法(必看)
2017/05/25 Python
python3设计模式之简单工厂模式
2017/10/17 Python
Sanic框架路由用法实例分析
2018/07/16 Python
python用win32gui遍历窗口并设置窗口位置的方法
2019/07/26 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
基于Python中random.sample()的替代方案
2020/05/23 Python
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
美国最大的半成品净菜电商:Blue Apron(蓝围裙)
2018/04/27 全球购物
什么是反射
2012/03/17 面试题
宿舍违规检讨书
2014/01/12 职场文书
结婚邀请函范文
2014/01/14 职场文书
学子宴答谢词
2014/01/25 职场文书
高中自我评价范文
2014/01/27 职场文书
2014年学习雷锋活动总结
2014/03/01 职场文书
小学校长先进事迹材料
2014/05/13 职场文书
个人担保书范文
2014/05/20 职场文书
庆六一活动总结
2014/08/29 职场文书
手写实现JS中的new
2021/11/07 Javascript