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