【javascript實現的圖片查看器】仿lightbox

一直就認為javascript是個好東西，一直想好好學習。學習當然也得有成果，在將近隔了一個月後終於有東西可寫了。

如今，我用javascript做了個圖片查看器。

先看：

先介紹下功能：

1.點擊小圖後可以顯示大圖，大圖固定覆蓋頁面

2.可以顯示本地圖片，只需要選擇圖片擷取到圖片地址即可

3.動態添加圖片，該圖片也可以點擊後顯示大圖

4.顯示的大圖附帶有關閉按鈕，點擊大圖或者關閉按鈕皆可關閉大圖

具體每個功能的實現：

（1）先設定一個固定的div層設定為隱藏，div層上有個圖片標籤，屬性src為空白值。在點擊小圖的事件上設定src屬性為小圖的地址且把div設定為可見即完成

（2）加上一個file標籤，在Onclick方法裡同時啟動計時器，當選中一張本地圖片後file標籤裡的文字框即會出現圖片的地址，此時計時器會把地址複製給大圖顯示的div層，

同時把div層設定為可見。

（3）動態添加圖片其實就是動態添加一個標籤，同時設定好屬性。但是在綁定事件的話就稍微複雜了。

根據瀏覽器不同會有不同的Binder 方法：

 

if (Element.addEventListener) { // Mozilla, Netscape, Firefox                Element.addEventListener('click',play, false);            } else if (Element.attachEvent) { // IE                Element.attachEvent("onclick", play);            }

 其中play為方法名。

（4）為了能夠有更好的使用者體驗，在大圖旁邊添加了個關閉按鈕。其實就是在圖片標籤後面加了個按鈕標籤，為其綁定了個方法就行了。當然，我在圖片的Onclick事件

也綁定了關閉的方法，為的就是使用者體驗。

使用的各種技術：

一。定時器的操作：

設定定時器： setInterval(getPic, 500);其中getPic為函數名，500就是每隔0.5秒運行一次

清除定時器：window.clearInterval(Interval);，清除定時器時傳入的參數為定時器的編號：var Interval=   setInterval(getPic, 500);在此需要定義一個全域變數。

二。DOM技術：標籤的操作。

擷取標籤：document.getElementById("fixPic")傳入的參數為標籤的ID

修改標籤的屬性： document.getElementById("fixPic").setAttribute("src", Url);

當然，此圖片查看器還可以進行很多的擴充，有興趣的讀者可以自己根據需要來實現。痛點就是如何?，看你的腦瓜子是否靈活，是否能有很好的方法了。

在定時器這裡，就有一些比較難控制的地方，比如說，你開啟定時器後該在什麼時候關閉呢？關閉了又改在什麼時候開啟呢？

要是有關於這些邏輯方面的問題的話，歡迎大家來跟我進行討論，非常樂意。

 差點忘記了源碼了：http://files.cnblogs.com/Zeech-Lee/javascript.rar