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

通過(guò)JavaScript使Div居中并隨網(wǎng)頁(yè)大小改變而改變

 更新時(shí)間:2013年06月24日 10:36:57   作者:  
自己的頁(yè)面太難看了,要居中沒(méi)居中,要顏色沒(méi)顏色,但是無(wú)論是怎么樣都得使登錄的框居中吧,下面與大家分享下通過(guò)JavaScript可以簡(jiǎn)單的使Div在頁(yè)面上居中,隨著網(wǎng)頁(yè)大小的改變做出相應(yīng)的改變
在使用Java做后臺(tái)的時(shí)候,都會(huì)做到登錄的頁(yè)面,但是自己的頁(yè)面太難看了,要居中沒(méi)居中,要顏色沒(méi)顏色,但是無(wú)論是怎么樣都得使登錄的框居中吧!以前的想法是通過(guò)CSS+Div使div居中,但是現(xiàn)在的想法變了,通過(guò)JavaScript可以簡(jiǎn)單的使Div在頁(yè)面上居中,隨著網(wǎng)頁(yè)大小的改變做出相應(yīng)的改變。而且只要明白了居中的原理輕而易舉的就可以實(shí)現(xiàn)了。
先看一下居中的原理吧!
先看一張圖。
 
從圖中看到了什么?可以看到紅色的框居中了,為什么會(huì)居中呢?通過(guò)觀察可以發(fā)現(xiàn)紅框的上下的藍(lán)色的間距線是一樣長(zhǎng)的,這樣可以確保了垂直居中,紅框的左右的綠色間距線也是一樣長(zhǎng)的,這樣可以確保了水平居中。
但是怎么使上下的間距相等呢?左右的間距相等呢?
在看一張圖:
 
假設(shè)當(dāng)前網(wǎng)頁(yè)的高為350px,寬為400px,而紅框的高為150px,寬為200px,我們可以發(fā)現(xiàn)網(wǎng)頁(yè)的高減去紅框元素的高得到200px像素,而這200px像素正是上下邊距的總和,上下邊距各得到了100px,同理,左右也是一樣的。
有沒(méi)有感覺(jué)到什么?
如果我們知道了網(wǎng)頁(yè)元素的高或?qū)挘瑴p去元素的高或?qū)?,然后在除?,就得到了上下左右邊距的距離。我們通常給元素的定位是怎么定的呢?不都是通過(guò)top和left的坐標(biāo)定的嗎?那么現(xiàn)在紅框的坐標(biāo)是什么呢?
再看一張圖:
 
紅色框的坐標(biāo)是藍(lán)色的上線100px,和綠色的左線100px,即left和top的值,這兩個(gè)值不是算出來(lái)的嗎?
可以總結(jié)一個(gè)公式:
居中的元素的top =(網(wǎng)頁(yè)高 –元素的高)/ 2;
居中的元素的left= (網(wǎng)頁(yè)寬 –元素的寬) /2;
轉(zhuǎn)化為JavaScript的語(yǔ)法為:
top = (document.body.clientHeight - element.offsetHeight)/2;
left = (document.body.clientWidth - element.offsetWidth)/2
獲取到top和left的坐標(biāo)不就居中了。
以下是居中的完整代碼:
這里要注意幾個(gè)問(wèn)題,要設(shè)置元素的position的屬性為absolute,即絕對(duì)定位,然后添加兩個(gè)事件onload和onresize,要加上px的字符串,offsetHeight是獲取元素自身的高,offsetWidth是獲取元素自身的寬,這就是當(dāng)網(wǎng)頁(yè)加載時(shí)和改變大小時(shí)div都會(huì)居中。不過(guò)這種做法是居中的元素和網(wǎng)頁(yè)的居中,如果想要一個(gè)元素在另一個(gè)元素的內(nèi)部居中的話,原理是一樣的。我們只需要將網(wǎng)頁(yè)的寬和高的代碼改為另一個(gè)元素的寬和高的代碼就行了。另一個(gè)元素的寬和高可以通過(guò)獲取到當(dāng)前元素的parent元素的高和寬。這樣也是可以居中的。如果用jquery這個(gè)框架,那么代碼就更簡(jiǎn)單了。
轉(zhuǎn)載請(qǐng)指明出處。

相關(guān)文章

最新評(píng)論