Javascript实现图片点击弹出

一直想给安装一个缩略图点击弹出的插件，但是找了找几乎都是用的php来做的，插件的使用和安装极其繁琐，于是上网查了些demo，自己实现了一个纯js的图片弹出插件。

实现的思路是通过编写hook图片的onclick事件的函数，在函数中对body追加div元素，再将传入的图片对象放入元素中，同时再监听div的onclilck事件，当捕捉到点击，再关闭(其实是隐藏)弹出的div。

通过在函数初始化的时候收集页面所有的img元素，再为每个img元素增加onclick="picHook(this)"这条属性，这样当图片在被点击时，这个函数就能自动创建div蒙板背景，并获取被点击图片的宽度和高度，同时生成一个新的和图片一样大小的div来显示图片。当蒙板再次被点击时，hook事件再次响应，并将蒙板和图片div的style置为none，弹出的图片就被关闭了。

实现效果见本博客，任意点击一个图片即可查看效果。

说起来很简单，做起来就更简单了，简单到只需要一个函数即可实现。

talking is cheap，show you my code:

        <script>

        function picHook(pic){

        /*图片对象*/

        var imgs = document.getElementsByTagName("img");

        /*前景div*/

        var light   = document.getElementById('light')  || document.createElement("div");

        /*背景div*/

        var bg      = document.getElementById('bg')     || document.createElement("div");

        /*图片放大*/

        var s_pic   = document.getElementById('s_pic')  || document.createElement("img");

        /*css对象*/

        var css     = document.createElement("style");

        /*css样式*/

        var csstext = '\

        .pic_bg{\

            position: absolute;\

            margin:0 auto; \

            top: 0%;\

            left: 0%;\

            right: 0%;\

            width: 100%;\

            padding-bottom: 1000%;\

            background-color: black;\

            z-index:1001;\

            opacity:.80;\

            filter: alpha(opacity=80);\

            overflow:scroll;\

        }\

        .pic_div {\

            margin-bottom: auto;\

            position: fixed;\

            left:30%;\

            top:20%;\

            width: 100%;\

            padding-top:25px;\

            margin-left:-250px;\

            margin-top:-100px;\

            z-index:1002;\

        }';

        /*收集页面所有图片对象*/

        for(i=0; i<imgs.length;i++){

            imgs[i].setAttribute("onclick", "picHook(this)" );

        }

        css.type = "text/css";

        /*关闭图像*/

        if( !pic ){

            bg.style.display = light.style.display = "none";

        }

        /*ie兼容*/

        if(css.styleSheet){

            css.styleSheet.cssText = csstext;

        }else{

            css.appendChild(document.createTextNode(csstext));

        }

        s_pic.setAttribute("id", "s_pic");

        s_pic.setAttribute("src", pic.src);

        s_pic.setAttribute("width","70%");

        s_pic.setAttribute("height","65%");

        s_pic.setAttribute("margin","0 auto");

        s_pic.style.display = 'block';

        light.setAttribute("id", "light");

        light.setAttribute("class", "pic_div");

        light.style.display = 'block';

        light.appendChild(s_pic);

        light.setAttribute("onclick", "picHook()");

        bg.setAttribute("id", "bg");

        bg.setAttribute("class", "pic_bg");

        bg.setAttribute("onclick", "picHook()");

        bg.style.display = light.style.display;

        document.getElementsByTagName("head")[0].appendChild(css);

        document.body.appendChild(bg);

        document.body.appendChild(light);

    }

    </script>

将这段代码保存在页面的head中，再将body的onload事件绑定到picHook()函数，你的页面中就也可以实现图片点击弹出大图啦。

还存在一点小bug，主要是因为我不太熟悉css，导致div的样式做的有点难看。

css的样式我是直接声明在js里的，这样就不用再另外创建css文件了。

强迫症，没办法。

等有时间再琢磨琢磨css，优化下样式。