Javascript 遮罩层和加载效果代码

复制代码 代码如下:

  //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(); }

  }