|
|
首先再次詳細解釋一下JS中窗口和網(wǎng)頁的幾種尺寸屬性的含義
document.body.clientWidth（網(wǎng)頁可見區(qū)域?qū)挘菏侵笧g覽器顯示網(wǎng)頁的區(qū)域?qū)挾龋话g覽器的邊框?qū)挾群痛怪睗L動條的寬度。大小隨著瀏覽器的窗口大小而改變。
document.body.clientHeight（網(wǎng)頁可見區(qū)域高）：是指瀏覽器顯示網(wǎng)頁的區(qū)域所能看到的高度，不包括瀏覽器的邊框?qū)挾群退綕L動條的高度。大小隨著瀏覽器的窗口大小而改變。
document.body.scrollTop（網(wǎng)頁被卷去的高）：是指拉動垂直滾動條時網(wǎng)頁上面被地址欄及菜單欄遮蓋著的部分的高。
document.body.scrollLeft（網(wǎng)頁被卷去的左）：是指拉動水平滾動條時網(wǎng)頁左面被左邊線遮蓋著的部分的寬。
現(xiàn)在我們來分析一下程序該如何實現(xiàn)：
第一步我們要實現(xiàn)的是使層在彈出時絕對居中不去考慮是否有滾動條的情況。
1.計算出層距離顯示區(qū)域左邊和上邊的位置
注意：divId指的是所要居中的層,divId.clientWidth為其寬度！＠
var divId = document.getElementById("xxx");
var v_left=(document.body.clientWidth-divId.clientWidth)/2;
var v_top=(document.body.clientHeight-divId.clientHeight)/2;
2.把得到的值重新賦給DIV的left和top屬性
divId.style.left＝v_left;
divId.style.top=v_top;
說明：divId為DIV標簽的id值
這樣這個層就是居中顯示的了。
第二步我們要實現(xiàn)的是使在拖動滾動條的情況下彈出的層也能居中。
其實很簡單我們只要把拖動的寬度和高度加到前面計算出來的左邊距和上邊距中就OK 了。
v_left+=document.body.scrollLeft;
v_top+=document.body.scrollTop;
2.把得到的值重新賦給DIV的left和top屬性
divId.style.left＝v_left;
divId.style.top=v_top;
這樣顯示出來就是居中的了。
完整代碼如下：
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
如果你想在拖動滾動條或是窗口重置大小時，層也能居中顯示的話，可以在body的屬性里面加上onresize="divcenter();"和 onscroll="divcenter();"就OK了，不過可能顯示的效果不是很好，特別是在拖動滾動條時的效果可能是一擅一擅的，忒不爽。
JavaScript技術(shù)：JS彈出居中的DIV的代碼，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
