圖片下拉選擇器的制作

下一頁 1 2 

　　 

　　相信大家都見過一些軟件里的圖片下拉選擇控件吧？喏，OICQ中就有。但網頁上的你見過沒有？小陽今天就為你推出你心怡已久的這個控件，下面演示中就是了！效果還可以吧？心動不如行動，我們來看下是怎么弄出來的。

　　演示：(點擊這里在新窗口中打開演示頁)




　　我們先來看下做出這個控件需要解決哪些問題。

　　第一，圖片下拉列表框是一個層，它在選擇提示框點擊時出現，出現后在選擇圖片或窗體點擊時再隱藏。

　　它出現時位置要在選擇提示框的正下方；隱藏實際上可以把它的位置定在屏幕之外（style.pixelLeft=-800）。

　　第二，圖片下拉列表框的位置。選擇提示框不是層，圖片下拉列表框出現的位置要在選擇提示框的正下方，就必須讀取選擇提示框在窗體中的絕對位置，不能受選擇提示框的位置和屏幕分辨率的影響。

　　我們可以用“Object.offsetLeft”和“Object.offsetTop”獲取對象（Object）在其父容器（offsetParent）中的相對位置。于是我們可以用while()循環向高一級父容器一層一層讀取相對位置，它們的代數和就是該Object在最上層容器（窗體）中的絕對位置了。

原文轉自：http://www.kjueaiud.com