DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 圖片下拉選擇器的制作
圖片下拉選擇器的制作
編輯:關於JavaScript     
相信大家都見過一些軟件裡的圖片下拉選擇控件吧?喏,OICQ中就有。但網頁上的你見過沒有?小陽今天就為你推出你心怡已久的這個控件,下面演示中就是了!效果還可以吧?心動不如行動,我們來看下是怎麼弄出來的。
  演示:(點擊這裡在新窗口中打開演示頁)





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

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

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

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

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

  第三,圖片下拉列表框的滾動,要保證自動滾動到相應的圖片出現在列表框的頂端:當手動滾動停止時,如果滾動條趨勢是向下滾動,則自動繼續向下滾動直至最近的圖片在列表框的頂端,反之亦然。

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

  

  程序最後“使窗體點擊時selectme(obj)函數被激活”部分可以用document.body.onclick=new Function("selectme(null)")簡單替換之。但為了不和其它程序的窗體點擊事件沖突,我們用了這段代碼。詳見拙作《javascript/10301/126194.html" target=_blank>完美解決一個事件激活多個函數》。你也可以將"myhead" 的type值設為"hide",這裡為了演示,就將它顯示了出來。

  好了,這個控件“圖片下拉選擇器”已經做好了,把它應用到留言本、論壇等動態交互的網頁上,真是最好不過了!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved