首頁 > web前端 > js教程 > 基於JavaScript實作圖片點擊彈出視窗而不是儲存_javascript技巧

基於JavaScript實作圖片點擊彈出視窗而不是儲存_javascript技巧

WBOY
發布: 2016-05-16 15:16:02
原創
1542 人瀏覽過

一直想給安裝一個縮圖點擊彈出的插件,但是找了找幾乎都是用的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實作圖片點擊彈出視窗而不是儲存的相關知識能夠幫助到大家。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板