|
元素定位：
完成了顯示隱藏，就到本程序另一個重點，元素定位。
程序包括這幾個定位：預(yù)設(shè)定位，自定義定位，自適應(yīng)定位。
而定位的最終效果是結(jié)合了這幾個定位設(shè)置的效果，下面再一一分析。
預(yù)設(shè)定位和自定義定位：
預(yù)設(shè)定位的意思是使用程序25個預(yù)設(shè)位置來定位。
25個位置是怎么來的呢？看下面的演示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
其中黑色框代表觸發(fā)元素，紅色框代表Tip。
一眼望去，要實現(xiàn)這么多的位置好像很復(fù)雜，這時要想找到最好的方法就要細心分析找出規(guī)律。
這25個位置其實都是由5個水平坐標和5個垂直坐標組合而來的，只要計算好這10個坐標，就能組合出這25個位置來了。
其中1，2，3，4，5代表的水平坐標，程序分別用left，clientleft，center，clientright，right來標識。
而1，6，11，16，21代表的垂直坐標，程序分別用top，clienttop，center，clientbottom，bottom來標識。
ps：詞窮，只好加個client來充數(shù)。
下面說說如何獲取這些坐標的值，首先通過getBoundingClientRect要獲取觸發(fā)元素的坐標對象。
ps：關(guān)于getBoundingClientRect的介紹請看 這里的元素位置。
再利用這個坐標對像，通過GetLeft和GetTop來獲取水平和垂直坐標。
GetLeft和GetTop里面都是些簡單的獲取坐標算法，具體請參考代碼。
使用時，把水平坐標和垂直坐標的標識值（字符）分別賦給觸發(fā)對象的Align和vAlign屬性，系統(tǒng)就會自動設(shè)置對應(yīng)的位置。
例如要設(shè)置位置14，那么Align設(shè)為"clientright"，vAlign設(shè)為"center"就可以了。
至于自定義定位就是在預(yù)設(shè)定位得到的坐標基礎(chǔ)上，根據(jù)Custom（形式如{ left: 50, top: -10 }）的設(shè)置再進行l(wèi)eft和top的修正。
自定義百分比定位是以觸發(fā)元素的寬和高為基準，取百分比：
if (trigger.Percent.left) { iLeft += .01 * trigger.Percent.left * trigger.Elem.offsetWidth; };
if (trigger.Percent.top) { iTop += .01 * trigger.Percent.top * trigger.Elem.offsetHeight; };
注意數(shù)值單位是0.01。
出處：藍色理想
責(zé)任編輯：bluehearts
上一頁 JavaScript 浮動定位提示效果 [4] 下一頁 JavaScript 浮動定位提示效果 [6]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 5 頁 JavaScript 浮動定位提示效果 [5]
