【元素位置】
table的樣式設(shè)置好后,還需要獲取原table和原tr的位置參數(shù),為后面的元素定位做準(zhǔn)備。 要獲取某個(gè)元素相對(duì)文檔的位置,傳統(tǒng)的做法是獲取對(duì)象的offsetLeft/offsetTop,然后不斷獲取offsetParent的offsetLeft/offsetTop,直到找不到offsetParent為止。 得到的結(jié)果就是相對(duì)文檔的位置了,上面已經(jīng)介紹過(guò)offsetParent,原理應(yīng)該都明白了吧。
不過(guò)這里介紹一個(gè)更好的方法,通過(guò)getBoundingClientRect方法來(lái)獲取。 在mozilla是這么說(shuō)明的: The returned value is a TextRectangle object, which contains read-only left, top, right and bottom properties describing the border-box, in pixels, with the top-left relative to the top-left of the viewport... 返回一個(gè)TextRectangle對(duì)象,包含left, top, right和bottom幾個(gè)只讀屬性,以px為單位來(lái)表示邊界框相對(duì)視窗左上角的位置。(偶英文爛。 注意是相對(duì)視窗,不是文檔哦,如果要相對(duì)文檔還必須加上scrollLeft/scrollTop。 通過(guò)下面的測(cè)試可以看到兩個(gè)方法返回的結(jié)果都是相同的:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<body> <style type="text/css"> .t{line-height:40px;width:200px; border:10px solid; margin-top:900px; margin-left:500px;} </style> <div class="t" id="t"></div> <script> var o = document.getElementById("t");
var rect = o.getBoundingClientRect(); var iLeft1 = rect.left + document.documentElement.scrollLeft, iTop1 = rect.top + document.documentElement.scrollTop;
var iLeft2 = o.offsetLeft, iTop2 = o.offsetTop; while (o.offsetParent) { o = o.offsetParent; iLeft2 += o.offsetLeft; iTop2 += o.offsetTop; }
alert(iLeft1+"_"+iLeft2) alert(iTop1+"_"+iTop2) </script> </body> </html>
程序中就是用getBoundingClientRect來(lái)獲取位置參數(shù):
//用getBoundingClientRect獲取原table位置 var top = this._doc.scrollTop, rect = this._oTable.getBoundingClientRect(); this._oTableLeft = rect.left + this._doc.scrollLeft; this._oTableTop = rect.top + top; this._oTableBottom = rect.bottom + top; //獲取原tr位置 rect = this._oRow.getBoundingClientRect(); this._oRowTop = rect.top + top; this._oRowBottom = rect.bottom + top;
顯然用getBoundingClientRect更方便快捷。 這個(gè)方法雖然是ie的產(chǎn)物,但已經(jīng)是w3c的標(biāo)準(zhǔn),而且ff3,Opera和最新版的chrome都已經(jīng)支持了這個(gè)方法,可以放心使用。 這里只是簡(jiǎn)單介紹,想了解更多可以看w3c的View Module部分。
獲取原table和tr的位置后,還需要計(jì)算新table的位置。 程序可以自定義新table位于視窗位置的百分比,例如頂部是0,中間是0.5,底部是1,可以在程序初始化時(shí)或用SetPos方法來(lái)設(shè)置。 這里主要獲取視窗高度和新table在視窗的top值:
this._viewHeight = document.documentElement.clientHeight; this._ntViewTop = (this._viewHeight - this._nTableHeight) * this._pos;
定位范圍實(shí)際上是從視框頂部到視框高度減去新table高度的范圍內(nèi)的,所以計(jì)算時(shí)要先把視窗高度減去新table的高度。
出處:藍(lán)色理想
責(zé)任編輯:bluehearts
上一頁(yè) JavaScript Table行定位效果 [5] 下一頁(yè) JavaScript Table行定位效果 [7]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論,我還想發(fā)表評(píng)論。
|