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文件。