Javascript 遮罩层和加载效果代码_Javascript教程-查字典教程网
Javascript 遮罩层和加载效果代码
Javascript 遮罩层和加载效果代码
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下://loadingfunctionshowLoad(tipInfo){variWidth=120;//弹出窗口的宽度;va...

复制代码 代码如下:

//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教程学习
    编程开发子分类