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

Question

Saya ingin merujuk js yang boleh mengezum masuk dan keluar daripada imej dalam html
Sebaik-baiknya menggunakan dua jenis imej, satu imej besar dan satu imej kecil
Saya ingin menggunakan fungsi komen dan perkongsian foto pusat membeli-belah.
Adakah yang lebih mudah difahami

Answer 1

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

<a class="show-big-pic" href="大图的路径">
 <img src="小图的路径">
</a>

Paparkan kawasan imej besar

<p class="big-pic"><img src="" alt=""></p>

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 2

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