基于JavaScript實(shí)現(xiàn)圖片點(diǎn)擊彈出窗口而不是保存
一直想給安裝一個(gè)縮略圖點(diǎn)擊彈出的插件,但是找了找?guī)缀醵际怯玫膒hp來(lái)做的,插件的使用和安裝極其繁瑣,于是上網(wǎng)查了些demo,自己實(shí)現(xiàn)了一個(gè)純js的圖片彈出插件。
實(shí)現(xiàn)的思路是通過編寫hook圖片的onclick事件的函數(shù),在函數(shù)中對(duì)body追加div元素,再將傳入的圖片對(duì)象放入元素中,同時(shí)再監(jiān)聽div的onclilck事件,當(dāng)捕捉到點(diǎn)擊,再關(guān)閉(其實(shí)是隱藏)彈出的div。
通過在函數(shù)初始化的時(shí)候收集頁(yè)面所有的img元素,再為每個(gè)img元素增加onclick="picHook(this)"這條屬性,這樣當(dāng)圖片在被點(diǎn)擊時(shí),這個(gè)函數(shù)就能自動(dòng)創(chuàng)建div蒙板背景,并獲取被點(diǎn)擊圖片的寬度和高度,同時(shí)生成一個(gè)新的和圖片一樣大小的div來(lái)顯示圖片。當(dāng)蒙板再次被點(diǎn)擊時(shí),hook事件再次響應(yīng),并將蒙板和圖片div的style置為none,彈出的圖片就被關(guān)閉了。
說起來(lái)很簡(jiǎn)單,做起來(lái)就更簡(jiǎn)單了,簡(jiǎn)單到只需要一個(gè)函數(shù)即可實(shí)現(xiàn)。
talking is cheap,show you my code:
<script> function picHook(pic){ /*圖片對(duì)象*/ 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對(duì)象*/ 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;\ }'; /*收集頁(yè)面所有圖片對(duì)象*/ 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>
將這段代碼保存在頁(yè)面的head中,再將body的onload事件綁定到picHook()函數(shù),你的頁(yè)面中就也可以實(shí)現(xiàn)圖片點(diǎn)擊彈出大圖啦。
還存在一點(diǎn)小bug,主要是因?yàn)槲也惶煜ss,導(dǎo)致div的樣式做的有點(diǎn)難看。
css的樣式我是直接聲明在js里的,這樣就不用再另外創(chuàng)建css文件了。
等過了這個(gè)節(jié)再琢磨琢磨css,優(yōu)化下樣式。希望本文給大家分享的JavaScript實(shí)現(xiàn)圖片點(diǎn)擊彈出窗口而不是保存的相關(guān)知識(shí)能夠幫助到大家。
- JS彈出窗口的運(yùn)用與技巧大全
- JS彈出窗口插件zDialog簡(jiǎn)單用法示例
- JavaScript實(shí)現(xiàn)自動(dòng)彈出窗口并自動(dòng)關(guān)閉窗口的方法
- JS+CSS實(shí)現(xiàn)Div彈出窗口同時(shí)背景變暗的方法
- JS+CSS實(shí)現(xiàn)帶關(guān)閉按鈕DIV彈出窗口的方法
- JavaScript彈出窗口方法匯總
- JS中使用FormData上傳文件、圖片的方法
- js獲取上傳文件的絕對(duì)路徑實(shí)現(xiàn)方法
- jQuery插件ajaxfileupload.js實(shí)現(xiàn)上傳文件
- js實(shí)現(xiàn)點(diǎn)擊按鈕彈出上傳文件的窗口
相關(guān)文章
分享幾個(gè)JavaScript運(yùn)算符的使用技巧
這篇文章主要介紹了分享幾個(gè)JavaScript運(yùn)算符的使用技巧,幫助大家更好的理解和學(xué)習(xí)使用JavaScript,感興趣的朋友可以了解下2021-04-04JavaScript對(duì)象類型轉(zhuǎn)換的分類及步驟詳解
這篇文章主要為大家介紹了JavaScript對(duì)象類型轉(zhuǎn)換的分類及步驟詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05詳解js中常規(guī)日期格式處理、月歷渲染和倒計(jì)時(shí)函數(shù)
大家在日常開發(fā)的時(shí)候經(jīng)常要用到日期格式的處理,下面這篇文章主要給大家介紹了js中常規(guī)日期格式處理、月歷渲染及倒計(jì)時(shí)函數(shù),有需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2016-12-12微信小程序swiper組件實(shí)現(xiàn)抖音翻頁(yè)切換視頻功能的實(shí)例代碼
這篇文章主要介紹了微信小程序swiper組件實(shí)現(xiàn)抖音翻頁(yè)切換視頻功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06JS獲取瀏覽器地址欄的多個(gè)參數(shù)值的任意值實(shí)例代碼
本文通過實(shí)例代碼給大家介紹了JS獲取瀏覽器地址欄的多個(gè)參數(shù)值的任意值,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的的朋友參考下吧2018-07-07JavaScript讀二進(jìn)制文件并用ajax傳輸二進(jìn)制流的方法
這篇文章主要介紹了JavaScript讀二進(jìn)制文件并用ajax傳輸二進(jìn)制流的方法的相關(guān)資料,需要的朋友可以參考下2016-07-07學(xué)習(xí)JavaScript正則表達(dá)式
這篇文章主要介紹了JavaScript正則表達(dá)式,詳細(xì)深入的了解JavaScript正則表達(dá)式,從而更熟練掌握J(rèn)avaScript正則表達(dá)式,感興趣的小伙伴們可以參考一下2015-11-11