一直想給安裝一個縮略圖點擊彈出的插件，但是找了找幾乎都是用的php來做的，插件的使用和安裝極其繁瑣，於是上網查了些demo，自己實現了一個純js的圖片彈出插件。

實現的思路是通過編寫hook圖片的onclick事件的函數，在函數中對body追加div元素，再將傳入的圖片對象放入元素中，同時再監聽div的onclilck事件，當捕捉到點擊，再關閉(其實是隱藏)彈出的div。
通過在函數初始化的時候收集頁面所有的img元素，再為每個img元素增加onclick="picHook(this)"這條屬性，這樣當圖片在被點擊時，這個函數就能自動創建div蒙板背景，並獲取被點擊圖片的寬度和高度，同時生成一個新的和圖片一樣大小的div來顯示圖片。當蒙板再次被點擊時，hook事件再次響應，並將蒙板和圖片div的style置為none，彈出的圖片就被關閉了。

        <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，優化下樣式。

Javascript實現圖片點擊彈出