相信大家都見過一些軟件里的圖片下拉選擇控件吧？喏，OICQ中就有。但網(wǎng)頁上的你見過沒有？小陽今天就為你推出你心怡已久的這個(gè)控件，下面演示中就是了！效果還可以吧？心動(dòng)不如行動(dòng)，我們來看下是怎么弄出來的。
　　演示：(點(diǎn)擊這里在新窗口中打開演示頁)

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

　　第一，圖片下拉列表框是一個(gè)層，它在選擇提示框點(diǎn)擊時(shí)出現(xiàn)，出現(xiàn)后在選擇圖片或窗體點(diǎn)擊時(shí)再隱藏。

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

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

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

　　第三，圖片下拉列表框的滾動(dòng)，要保證自動(dòng)滾動(dòng)到相應(yīng)的圖片出現(xiàn)在列表框的頂端：當(dāng)手動(dòng)滾動(dòng)停止時(shí)，如果滾動(dòng)條趨勢是向下滾動(dòng)，則自動(dòng)繼續(xù)向下滾動(dòng)直至最近的圖片在列表框的頂端，反之亦然。

　　例子中我們將所有供選圖片命名為“0.gif”、“1.gif”……“9.gif”，并放在“head”目錄下。下面我們以實(shí)際程序解決這些問題：

　　

　　程序最后“使窗體點(diǎn)擊時(shí)selectme(obj)函數(shù)被激活”部分可以用document.body.onclick=new Function("selectme(null)")簡單替換之。但為了不和其它程序的窗體點(diǎn)擊事件沖突，我們用了這段代碼。詳見拙作《完美解決一個(gè)事件激活多個(gè)函數(shù)》。你也可以將"myhead" 的type值設(shè)為"hide"，這里為了演示，就將它顯示了出來。

　　好了，這個(gè)控件“圖片下拉選擇器”已經(jīng)做好了，把它應(yīng)用到留言本、論壇等動(dòng)態(tài)交互的網(wǎng)頁上，真是最好不過了！