javascript - Adakah terdapat sebarang js mudah yang boleh digunakan untuk mengezum masuk dan keluar dengan mengklik pada imej?

Question

Saya ingin menggunakan js yang boleh mengezum masuk dan keluar daripada imej dalam html Adalah lebih baik menggunakan dua jenis imej, satu imej besar dan satu imej kecil Adakah terdapat fungsi perkongsian imej yang lebih mudah untuk ulasan pusat membeli-belah. tidak tahu.

淡淡烟草味 · Answer

Secara amnya, fungsi seperti ini memerlukan banyak fungsi, seperti kesan animasi gambar besar yang muncul apabila diklik, lapisan topeng, sama ada gambar itu perlu diubah menjadi baris gilir yang boleh dikawal, dan lain-lain. Jadi apabila terdapat lebih banyak fungsi, secara semula jadi akan terdapat lebih banyak kod Secara amnya, sama ada Jadikan ia menjadi pemalam kaedah objek lanjutan JQ, atau laksanakannya sebagai pembina js, kelas ES6, dsb.

Jika anda memerlukan fungsi paling mudah untuk mengklik gambar kecil untuk memaparkan gambar besar - - berikut adalah yang paling asli. .
Lihat contoh terus: https://jsfiddle.net/v1sgnuhp/

Klik kawasan imej kecil

Paparkan kawasan imej besar

css

  * {margin: 0;padding: 0; }
  img {vertical-align: top; }

  .show-big-pic {position: absolute;margin-left: 200px;margin-top: 200px;}
  .big-pic {position: absolute;display: none;}
  
  .big-pic.active {z-index: 999;display: block; }

js

  let smallPic = document.querySelector('.show-big-pic');
  let bigPic = document.querySelector('.big-pic');
  let bigImg = bigPic.querySelector('img');
  smallPic.onclick = function(e) {
    e.preventDefault();
    bigImg.src = this.href;
    bigPic.classList.add('active');
  };
  bigPic.onclick = function() {
    if (bigPic.classList.contains('active')) {
      bigPic.classList.remove('active');
      bigImg.src = '';
    }
  };

Daripada "The Art of Javascript Dom Programming" dengan sedikit pengubahsuaian. . . Saya masih ingat membaca buku ini semasa saya mula-mula belajar JS

我想大声告诉你 · Answer

http://photoswipe.com/ Bukankah ini bagus?