欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

用js小類庫獲取瀏覽器的高度和寬度信息

 更新時間：2012年01月15日 22:26:09   作者：  
在做項目時碰到了要在頁面上顯示一個浮動DIV層的效果。本來做的是在頁面居中時顯示的，但后來經(jīng)過自己的測試發(fā)現(xiàn)，當網(wǎng)頁中出現(xiàn)了滾動條之后，那個浮動的DIV卻還是在頁面的頂部顯示的
因此當用戶在一個較長內(nèi)容的網(wǎng)頁中點擊某一個按鈕顯示DIV層會發(fā)現(xiàn)沒有任何效果(其實已經(jīng)在頁面的頂部顯示了)，因此，我們需要準備的知道用戶當前的瀏覽的位置的信息。在實現(xiàn)這個要求之前，先來看看在js中有哪些工具可以讓我們使用：

網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth;
網(wǎng)頁可見區(qū)域高： document.body.clientHeight;
網(wǎng)頁可見區(qū)域?qū)挘?document.body.offsetWidth + " (包括邊線和滾動條的寬)";
網(wǎng)頁可見區(qū)域高：document.body.offsetHeight + " (包括邊線的寬)";
網(wǎng)頁正文全文寬：document.body.scrollWidth;
網(wǎng)頁正文全文高：document.body.scrollHeight;
網(wǎng)頁被卷去的高(ff)： document.body.scrollTop;
網(wǎng)頁被卷去的高(ie)：document.documentElement.scrollTop;
網(wǎng)頁被卷去的左：document.body.scrollLeft;
網(wǎng)頁正文部分上： window.screenTop;
網(wǎng)頁正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的寬： window.screen.width;
屏幕可用工作區(qū)高度： window.screen.availHeight;
屏幕可用工作區(qū)寬度： window.screen.availWidth;
你的屏幕設(shè)置是  window.screen.colorDepth +" 位彩色";
你的屏幕設(shè)置  window.screen.deviceXDPI +" 像素/英寸";

 

這段資料來源于網(wǎng)絡(luò)，看到這么多的相似的概念時我已經(jīng)瘋掉了，但處于技術(shù)人的執(zhí)著，我還是頑強的看完了并做了一些理解。經(jīng)過自己的理解和吸收之后，我覺得如果我每次想獲取一個高度或者寬度信息時我會抓狂的，因此，我對瀏覽器的這些屬性做了一些整理和抽象，按照這樣的三個對象來剝離這么多的相似的屬性，第一個是頁面，第二是窗口，第三個是視口。來看圖片理解我的這三個對象的含義吧：

瀏覽器三層

對這三個概念做一個解釋：

頁面：就是我們制作出來的網(wǎng)頁的頁面的一個抽象，他的高度通常比我們的瀏覽器的高度要高，寬度通常是小于等于我們的瀏覽器寬度

瀏覽器窗口：就是我們使用的瀏覽器的一個抽象，他包含了菜單欄、工具欄、書簽欄、狀態(tài)欄、頁面顯示區(qū)等。因此他的高度絕對大于等于視口的高度，寬度絕對大于等于視口的寬度

視口：就是瀏覽器中顯示頁面的區(qū)域

有了這三個概念鋪底，我們來寫個小類庫，獲取這個“對象”的高度和寬度等信息吧：

復(fù)制代碼 代碼如下:

var Browser = {
};
//頁面
Browser.Page = (function () {
return {
scrollTop: function () {
return Math.max(document.body.scrollTop, document.documentElement.scrollTop);
},
scrollLeft: function () {
return Math.max(document.body.scrollLeft, document.documentElement.scrollLeft);
},
height: function () {
var _height;
if (document.compatMode == "CSS1Compat") {
_height = document.documentElement.scrollHeight;
} else {
_height = document.body.scrollHeight;
}
return _height;
},
width: function () {
var _width;
if (document.compatMode == "CSS1Compat") {
_width = document.documentElement.scrollWidth;
} else {
_width = document.body.scrollWidth;
}
return _width;
}
};
})();
//窗口：
Browser.Window = (function () {
return {
outerHeight: function () {
var _hei = window.outerHeight;
if (typeof _hei != "number") {
_hei = Browser.ViewPort.outerHeight();
}
return _hei;
},
outerWidth: function () {
var _wid = window.outerWidth;
if (typeof _wid != "number") {
_wid = Browser.ViewPort.outerWidth();
}
return _wid;
},
innerHeight: function () {
var _hei = window.innerHeight;
if (typeof _hel != "number") {
_hei = Browser.ViewPort.innerHeight();
}
return _hei;
},
innerWidth: function () {
var _wid = window.innerWidth;
if (typeof _wid != "number") {
_wid = Browser.ViewPort.innerWidth();
}
return _wid;
},
height: function () {
return Browser.Window.innerHeight();
},
width: function () {
return Browser.Window.innerWidth();
}
}
})();
//視口:
Browser.ViewPort = (function () {
return {
innerHeight: function () {
var _height;
if (document.compatMode == "CSS1Compat") {
_height = document.documentElement.clientHeight;
} else {
_height = document.body.clientHeight;
}
return _height;
},
innerWidth: function () {
var _width;
if (document.compatMode == "CSS1Compat") {
_width = document.documentElement.clientWidth;
} else {
_width = document.body.clientWidth;
}
return _width;
},
outerHeight: function () {
var _height;
if (document.compatMode == "CSS1Compat") {
_height = document.documentElement.offsetHeight;
} else {
_height = document.body.offsetHeight;
}
return _height;
},
outerWidth: function () {
var _width;
if (document.compatMode == "CSS1Compat") {
_width = document.documentElement.offsetWidth;
} else {
_width = document.body.offsetWidth;
}
return _width;
},
width: function () {
return Browser.ViewPort.innerWidth();
},
height: function () {
return Browser.ViewPort.innerHeight();
}
}
})();

做幾點說明：
1、已經(jīng)能支持獲取多瀏覽器的內(nèi)部的視口的寬度和高度信息
2、在IE 9中已經(jīng)和其他的瀏覽器(Opera、Chrome、FirFox、Safari)一樣，已經(jīng)能支持用window.innerHeight、window.innerWidth、window.outerHeight、window.outerWidth這四個屬性獲取瀏覽器的窗口、視口的寬度高度信息,但是IE9以前的IE版本是沒有這些屬性的，因此在這樣的情況下，我將視口和窗口的概念等同起來了。
2、雖然window有寬度和高度信息，但是不一定是真正瀏覽器窗口的真正的寬度和高度信息。因為有些瀏覽器返回的結(jié)果中就不含菜單欄、工具欄等的高度信息。
實例演示：
在一個垂直內(nèi)容過多的頁面中，使一個DIV總能保持在視口的中心位置(非精確中心位置)：
代碼：
復(fù)制代碼 代碼如下:

window.onload = window.onresize = function () {
var top = Math.round(Browser.Page.scrollTop() + (Browser.ViewPort.height() / 2) - (parseInt(document.getElementById("divCenter").style.height) / 2));
var left = Math.round(Browser.Page.scrollLeft() + (Browser.ViewPort.width() / 2) - (parseInt(document.getElementById("divCenter").style.width) / 2));
document.getElementById("divCenter").style.top = top + "px";
document.getElementById("divCenter").style.left = left + "px";
}

大家測試時可以采用改變窗口大小的方式來查看。
時間不早了，晚安！
源代碼下載查看

相關(guān)文章

最新評論