小结js屏幕、浏览器、页面大小（二）

    在上一篇博文 中主要对几种获取网页大小（宽度、高度）的属性进行了描述，结合上一篇的成果，在此篇文章中，利用几种属性，对网页上的一些常用功能(比如大小、位置)进行实现：（在Windows7 下的IE9、Chrome 16、FireFox 9、Opera 11.6、Safari 5.1测试通过）

 本文地址：http://www.cnblogs.com/vnii/archive/2012/01/17/2323632.html

  //网页大小，宽度和高度，中心点,当前屏幕左上角右下角相对位置
  var webPage = (function () {
      var b = document.body;
      var e = document.documentElement;
      return {
          //当前网页的总大小
          size: function () {
              //结合上一篇博文中scrollXxx等几种属性的描述
              var w = Math.max(b.scrollWidth, b.offsetWidth, e.scrollWidth);
              var h = Math.max(b.scrollHeight, b.offsetHeight, e.scrollHeight);
              return { "width": w * 1, "height": h * 1 };
          },
          //当前视窗的屏幕中心位置
          center: function (pos) {//pos偏移{left:value,top:value}

              //当前视窗中心点位置相对网页左上角的像素位置＝当前视窗大小/2 + 滚动条偏移值
              var lt = this.leftTop();
              var x = e.clientWidth / 2 + lt.x;
              var y = e.clientHeight / 2 + lt.y;
              if (pos) {
                  if (pos.left * 1) {
                      x = x + pos.left * 1;
                  }
                  if (pos.top * 1) {
                      y = y + pos.top * 1;
                  }
              }
              return { "x": x, "y": y };
          },
          //当前视窗左上角相对当前网页左上角的像素位置＝＝滚动条偏移量
          leftTop: function () {
              //e.scrollLeft：IE下为偏移值，其它为0 ，b.scrollLeft:IE为0,Chrome等为偏移值
              return { "x": (b.scrollLeft + e.scrollLeft) * 1, "y": (b.scrollTop + e.scrollTop) * 1 };
          },
          //当前视窗右下角相对当前网页左上角的像素位置＝＝当前视窗大小+滚动条偏移量
          rightBottom: function () {
              var lt = this.leftTop();
              return { "x": e.clientWidth + lt.x, "y": e.clientHeight + lt.y };
          }
      }
  } ());

    利用上面方法，实现一个网页蒙版，并且在网页当前视窗中心位置始终悬浮一个div

  //按参数要求创建一个div到网页，参数s={"width":容器宽度,"height":容器高度,"color":"颜色","x":左上角位置,"y":左上角位置,"z":层位置};
  function createDiv(s) {
      var d = document.createElement("div");
      d.setAttribute("style", "filter:alpha(Opacity=80);-moz-opacity:0.2;opacity:0.2;z-index:" + parseInt(1 + s.z));
      d.style.position = "absolute";
      d.style.margin = "0px";

      d.style.backgroundColor = s.color;
      d.style.left = s.x + "px";
      d.style.top = s.y + "px";
      d.style.width = s.width + "px";
      d.style.height = s.height + "px";

      document.body.appendChild(d);
      return d;
  }

  var centerDiv; //全局变量，用于记录存放视窗中心位置的div
  var myWidth = 100;//放置div的宽度
  var myHeight = 100;//高度

  window.onload = function () {
      //网页size
      var q1 = webPage.size();

      //当前视窗中心点在加上偏移量后的位置点
      var q2 = webPage.center({ left: -myWidth / 2, top: -myHeight / 2 });

      //整个网页覆盖蒙版div
      createDiv({ "width": q1.width, "height": q1.height, "color": "#ff0000", "x": 0, "y": 0, "z": 99 });

      //指定视窗某位置创建一个div
      centerDiv = createDiv({ "width": myWidth, "height": myHeight, "color": "#000000", "x": q2.x, "y": q2.y, "z": 999 });
  }

  //浏览器大小变化或者滚动条偏移时 重新修改指定div的位置，保持在视窗中的位置相对不变
  window.onscroll = window.onresize = function () {
      var q2 = webPage.center({ left: -myWidth / 2, top: -myHeight / 2 });
      if (centerDiv) {
          centerDiv.style.top = q2.y + "px";
          centerDiv.style.left = q2.x + "px";
      }
  }

效果：