javascript - Existe-t-il un js simple qui peut être utilisé pour zoomer et dézoomer en cliquant sur l'image?

Question

Je souhaite référencer un js qui peut zoomer et dézoomer sur les images en HTML
Il est préférable d'utiliser deux types d'images, une grande image et une petite image
Je souhaite utiliser la fonction de commentaire et de partage de photos du. centre commercial
Y en a-t-il un plus simple ? Non Trop compréhensif

Answer 1

Généralement, ce type de fonction nécessite de nombreuses fonctions, telles que l'effet d'animation d'une grande image apparaissant lorsque vous cliquez dessus, un calque de masque, si l'image doit être transformée en une file d'attente contrôlable, etc. fonctions, il y aura naturellement plus de codes. Généralement, soit faites-en un plug-in de méthode d'objet étendu JQ, soit implémentez-le en tant que constructeur js, classe ES6, etc.

Si vous avez besoin de la fonction la plus simple consistant à cliquer sur une petite image pour faire apparaître une grande image, voici la plus originale. .
Voir l'exemple directement : https://jsfiddle.net/v1sgnuhp/

Cliquez sur la zone de la vignette

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

Zone d'affichage de grande image

<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 = '';
    }
  };

De "The Art of Javascript Dom Programming" avec de légères modifications. . . Je me souviens avoir lu ce livre lorsque j'ai appris JS pour la première fois

Answer 2

http://photoswipe.com/ N'est-ce pas plutôt bien ?