js控制使div自動適應居中

    一直都在想怎麼樣使彈出的DIV能在任何時候都是居中顯示的,剛開始的時候是用CSS樣式直接定義好層的位置,但是當頁面很長的時候,或是瀏覽器窗口大小不是固定的時候就不能正確的顯示,所以只好用JS來控制DIV的顯示位置。

    首先再次詳細解釋一下JS中窗口和網頁的幾種尺寸屬性的含義:
    document.body.clientWidth (網頁可見區域寬):是指瀏覽器顯示網頁的區域寬度,不包括瀏覽器的邊框寬度和垂直滾動條的寬度。大小隨着瀏覽器的窗口大小而改變。
    document.body.clientHeight (網頁可見區域高):是指瀏覽器顯示網頁的區域所能看到的高度,不包括瀏覽器的邊框寬度和水平滾動條的高度。大小隨着瀏覽器的窗口大小而改變。
    document.body.scrollTop (網頁被捲去的高):是指拉動垂直滾動條時網頁上面被地址欄及菜單欄遮蓋着的部分的高。
    document.body.scrollLeft (網頁被捲去的左):是指拉動水平滾動條時網頁左面被左邊線遮蓋着的部分的寬。

 

   現在我們來分析一下程序該如何實現:
第一步我們要實現的是使層在彈出時絕對居中不去考慮是否有滾動條的情況。
1.計算出層距離顯示區域左邊和上邊的位置
注意:divId指的是所要居中的層,divId.clientWidth爲其寬度!@
var divId = document.getElementByIdx("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值
這樣這個層就是居中顯示的了。
第二步我們要實現的是使在拖動滾動條的情況下彈出的層也能居中。
其實很簡單我們只要把拖動的寬度和高度加到前面計算出來的左邊距和上邊距中就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;
這樣顯示出來就是居中的了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章