javascript - Gibt es ein einfaches JS, mit dem man durch Klicken auf das Bild hinein- und herauszoomen kann?

Question

Ich möchte auf ein JS verweisen, das Bilder in HTML vergrößern und verkleinern kann.
Am besten verwenden Sie zwei Arten von Bildern, ein großes Bild und ein kleines Bild.
Ich möchte die Kommentar- und Foto-Sharing-Funktion verwenden Einkaufszentrum.
Gibt es ein einfacheres?

Answer 1

一般这种功能需要很多功能，比如点击时大图蹦出来的动画效果，遮罩层，图片是否需要变成一个可控队列等等，所以功能一多了，自然代码就多了，一般要么做成JQ扩展对象方法插件，要么就是js的构造函数，ES6的class等实现。

如果你之需要一个最简单的点击小图蹦出大图功能- -这里有个最原始的。。
直接查看例子：https://jsfiddle.net/v1sgnuhp/

小图的点击区域

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

大图的显示区域

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

出自《Javascript Dom 编程艺术》稍微改了下。。。记得当年第一次学JS就是看的这书

Answer 2

http://photoswipe.com/ 这个不就挺好的吗。