js获取页面的可视宽高度，占位宽高度，获取元素左上角相对页面左上角的位置，元素左上角相对可是区域的位置，元素是否存在于页面可视范围内

  1 var css = (function () { // 以下方法兼容ie7+，chrome（亲测），ie6没有测试（应该也是可以支持的）
  2     var doEle = document.documentElement,
  3         doBody = document.body,
  4         doScrollLeft,
  5         doScrollTop,
  6         utils,
  7         offsetLeft,
  8         offsetTop,
  9         offsetParent;
 10 
 11     utils = {
 12 
 13         // 获取页面的可视宽度和高度
 14         getAvailPage: function () {
 15             return {
 16                 width: doEle.clientWidth || doBody.clientWidth,
 17                 height: doEle.clientHeight || doBody.clientHeight
 18             };
 19             
 20             // 以下是进行||运算的缘由，后几个方法也是如此
 21             //            if (document.compatMode === 'BackCompat') { // ie6或者没有文档说明下的计算方法
 22             //                return {
 23             //                    width: doBody.clientWidth,
 24             //                    height: doBody.clientHeight
 25             //                };
 26             //            } else { // document.compatMode == "CSS1Compat"（有文档说明）
 27             //                return {
 28             //                    width: doEle.clientWidth,
 29             //                    height: doEle.clientHeight
 30             //                };
 31             //            }
 32         },
 33 
 34         // 获取页面的占位宽度和高度
 35         getAllPage: function () {
 36             return {
 37                 width: Math.max(doEle.clientWidth || doBody.clientWidth, doEle.scrollWidth || doBody.scrollWidth),
 38                 height: Math.max(doEle.clientHeight || doBody.clientHeight, doEle.scrollHeight || doBody.scrollHeight)
 39             };
 40         },
 41 
 42         // 获取元素的绝对位置
 43         getOffset: function (element) {
 44 
 45             offsetLeft = element.offsetLeft;
 46             offsetTop = element.offsetTop;
 47             offsetParent = element.offsetParent;
 48 
 49             while (offsetParent) {
 50                 offsetLeft += offsetParent.offsetLeft;
 51                 offsetTop += offsetParent.offsetTop;
 52                 offsetParent = offsetParent.offsetParent;
 53             }
 54 
 55             return {
 56                 top: offsetTop,
 57                 left: offsetLeft
 58             };
 59         },
 60 
 61         // 获取元素的相对位置
 62         getOffsetRelative: function (element) {
 63 
 64             doScrollLeft = doEle.scrollLeft || window.pageXOffset || doBody.scrollLeft;
 65             doScrollTop = doEle.scrollTop || window.pageYOffset || doBody.scrollTop;　　　　
 66 
 67             return {
 68                 top: this.getOffset(element).top - doScrollTop,
 69                 left: this.getOffset(element).left - doScrollLeft
 70             };
 71         },
 72 
 73         // 是否在可视区域可见
 74         isVisible: function (element) {
 75             var left = this.getOffset(element).left,
 76                 top = this.getOffset(element).top,
 77                 width = element.offsetWidth,
 78                 height = element.offsetHeight,
 79                 docuHeight = this.getAvailPage().height,
 80                 docuWidth = this.getAvailPage().width,
 81                 docuLeft = doEle.scrollLeft || window.pageXOffset || doBody.scrollLeft,
 82                 docuTop = doEle.scrollTop || window.pageYOffset || doBody.scrollTop;
 83 
 84             // 元素下侧超出可视区域上侧
 85             // 元素上侧超出可视区域下侧
 86             // 元素左侧超出可视区域右侧
 87             // 元素右侧超出可视区域左侧
 88             if (top + height < docuTop ||
 89                 top > docuTop + docuHeight ||
 90                 left > docuLeft + docuWidth ||
 91                 left + width < docuLeft) {
 92                 return false;
 93             } else {
 94                 return true;
 95             }
 96         }
 97     };
 98 };
 99 
100 return utils;
101 
102 })();
posted on 2016-01-05 11:45 微笑浮上脸阅读(664) 评论(0) 收藏举报