基於JavaScript實現圖片點擊快顯視窗而不是儲存_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%;\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:50%;\top:50%;\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);light.setAttribute("id", "light");light.setAttribute("class", "pic_div");light.style.display = 'block';light.appendChild(s_pic);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實現圖片點擊快顯視窗而不是儲存的相關知識能夠協助到大家。