javascript類lightbox效果

　　最近因為需要在手機網站開發一個圖片放大縮小的效果。本來想用lightbox的架構代碼的，但是代碼實在太多，就自己寫了一個。

　　主要是用到了樣式中的透明度，還有div置中顯示。

　　layout的具體樣式　

 <style type="text/css">    .lay{position:absolute;z-index:998;margin:0 auto;top:0;height:100%;width:100%;background:rgba(0, 0, 0, 0.3);} </style>

在對多個圖片綁定事件的時候遇到一個問題。就是我先用迴圈來判斷img元素的個數，然後為每個元素繫結事件，由於我但是代碼是這樣寫的

for(var i=0; i<$(".pic .img").length; i++) {　　$(".pic .img img").get(i).addEventListener("click", function() {
　　　　alert(i);   　　$(".fuc").get(i).style.display = "none";       toBiggerPic(i);     })
}

如果代碼這麼寫會有一個問題。因為如果這麼，加入圖片個數為5的話，寫那個i的值始終會是5。

這個主要是範圍的問題。綁定函數的上一級範圍為window，它的值在迴圈結束後為5，所以無論怎麼樣都會顯示出5。解決辦法就是重新設定下範圍，就是使用大家所謂的閉包。

新的代碼：

 for(var i=0; i<$(".pic .img").length; i++) {        $(".pic .img img").get(i).addEventListener("click", (function(i) {            return  function() {
　　　　　　　　　 alert(i);                $(".fuc").get(i).style.display = "none";                toBiggerPic(i);              }        })(i),false);

還有一處是我的div是需要在img映像完全載入完成後才能擁有大小，並進行置中設定。需要判斷圖片是否載入完全再進行判斷。

因為在手機上頁面判斷圖片是否載入完和pc端不同。它在首次載入圖片會執行img.onload方法，但是在圖片載入完成之後就直接從緩衝中讀取圖片，不執行window.onload裡的代碼了。所以需要做一次判斷圖片是否是首次載入。具體代碼：

function toBiggerPic(i) {    $(".layout").get(0).style.display = "block";    $(".popOrigPic2").get(0).style.display = "block";    $(".popOrigPic2 img").get(0).setAttribute("src", $(".pic .img img").get(i).getAttribute("src").replace(/b/, "g"));    /*因為瀏覽器只在第一次載入圖片的時候執行onload函數。為了在之後也執行置中的代碼。給圖片是否載入完成加一個屬性的判斷。*/    if($(".popOrigPic2 img").get(0).getAttribute("complete") == "complete") {        vMiddle($(".popOrigPic2").get(0));    } else {        $(".popOrigPic2 img").get(0).onload = function() {            $(".popOrigPic2 img").get(0).setAttribute("complete", "complete");            vMiddle($(".popOrigPic2").get(0));        }    }}

最後在不同手機進行測試的時候在遮罩層的顯示上出現一個問題。

在android的內建瀏覽器上，給遮罩層添加點擊事件讓它隱藏後，遮罩層會變亮黃色然後才消失。後來的解決方案是在遮罩層外部加一個div，給那個div添加點擊事件來實現。

具體代碼地址：http://www.cnblogs.com/zzcflying/admin/Files.aspx。testPic檔案。