复制代码 代码如下:

//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' /><span>' + 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'></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 Array对象详解

★ javascript验证邮件地址和MX记录的方法

★ JavaScript实现鼠标点击后层展开效果的方法

★ 用javascript动态注释掉HTML代码

★ JavaScript实现列表分页功能特效

★ Javascript实现的SHA-256加密算法完整实例

★ VBScript版代码高亮

★ javascript搜索框效果实现方法

★ JavaScript实现添加、查找、删除元素

★ Javascript随机显示图片的源代码