Melaksanakan tetingkap pop timbul klik imej berdasarkan JavaScript dan bukannya kemahiran saving_javascript

Saya sentiasa mahu memasang pemalam yang membenarkan imej kecil muncul apabila diklik, tetapi selepas mencari, hampir kesemuanya dilakukan menggunakan PHP Penggunaan dan pemasangan pemalam itu amat menyusahkan, jadi saya menyemak beberapa tunjuk cara dalam talian dan melaksanakan pemalam pop timbul Gambar.

Idea pelaksanaan adalah untuk menulis fungsi yang mengaitkan peristiwa onclick imej, tambahkan elemen div pada badan dalam fungsi, kemudian letakkan objek imej masuk ke dalam elemen, dan pada masa yang sama dengar ke acara onclilck div Apabila klik ditangkap , dan kemudian tutup (sebenarnya sembunyikan) div pop timbul.

Dengan mengumpulkan semua elemen img pada halaman apabila fungsi dimulakan, dan kemudian menambahkan atribut onclick="picHook(this)" pada setiap elemen img, fungsi ini boleh membuat div secara automatik apabila imej diklik latar belakang, dapatkan lebar dan ketinggian imej yang diklik, dan hasilkan div baharu dengan saiz yang sama dengan imej untuk memaparkan imej. Apabila topeng diklik sekali lagi, acara cangkuk bertindak balas semula, dan gaya topeng dan div imej ditetapkan kepada tiada, dan imej pop timbul ditutup.

Ia mudah untuk dikatakan, tetapi ia lebih mudah untuk dilakukan sehingga anda hanya memerlukan satu fungsi untuk melaksanakannya.

bercakap itu murah, tunjukkan kod saya:

<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>

Simpan kod ini di kepala halaman, dan kemudian ikat acara onload badan ke fungsi picHook() Anda juga boleh merealisasikan pop timbul imej yang besar pada halaman anda apabila anda mengklik pada imej.

Masih terdapat sedikit pepijat, terutamanya kerana saya tidak begitu mahir dengan CSS, yang menjadikan gaya div agak hodoh.

Saya mengisytiharkan gaya css terus dalam js, jadi saya tidak perlu mencipta fail css lain.

Tunggu sehingga bahagian ini tamat sebelum memikirkan tentang css dan mengoptimumkan gaya. Saya harap pengetahuan yang dikongsi dalam artikel ini tentang menggunakan JavaScript untuk melaksanakan tetingkap pop timbul imej dan bukannya menyimpannya akan membantu anda.