一直想給安裝一個縮略圖點(diǎn)擊彈出的插件，但是找了找?guī)缀醵际怯玫膒hp來做的，插件的使用和安裝極其繁瑣，于是上網(wǎng)查了些demo，自己實(shí)現(xiàn)了一個純js的圖片彈出插件。
實(shí)現(xiàn)的思路是通過編寫hook圖片的onclick事件的函數(shù)，在函數(shù)中對body追加div元素，再將傳入的圖片對象放入元素中，同時再監(jiān)聽div的onclilck事件，當(dāng)捕捉到點(diǎn)擊，再關(guān)閉(其實(shí)是隱藏)彈出的div。
通過在函數(shù)初始化的時候收集頁面所有的img元素，再為每個img元素增加onclick="picHook(this)"這條屬性，這樣當(dāng)圖片在被點(diǎn)擊時，這個函數(shù)就能自動創(chuàng)建div蒙板背景，并獲取被點(diǎn)擊圖片的寬度和高度，同時生成一個新的和圖片一樣大小的div來顯示圖片。當(dāng)蒙板再次被點(diǎn)擊時，hook事件再次響應(yīng)，并將蒙板和圖片div的style置為none，彈出的圖片就被關(guān)閉了。
說起來很簡單，做起來就更簡單了，簡單到只需要一個函數(shù)即可實(shí)現(xiàn)。
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";/*關(guān)閉圖像*/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()函數(shù)，你的頁面中就也可以實(shí)現(xiàn)圖片點(diǎn)擊彈出大圖啦。
還存在一點(diǎn)小bug，主要是因?yàn)槲也惶煜ss，導(dǎo)致div的樣式做的有點(diǎn)難看。
css的樣式我是直接聲明在js里的，這樣就不用再另外創(chuàng)建css文件了。
等過了這個節(jié)再琢磨琢磨css，優(yōu)化下樣式。希望本文給大家分享的JavaScript實(shí)現(xiàn)圖片點(diǎn)擊彈出窗口而不是保存的相關(guān)知識能夠幫助到大家。
新聞熱點(diǎn)
疑難解答
