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

Question

Ich möchte ein JS verwenden, das Bilder in HTML vergrößern und verkleinern kann. Es ist am besten, zwei Arten von Bildern zu verwenden, ein großes Bild und ein kleines Bild. Gibt es eine einfachere Bildfreigabefunktion für die Kommentare des Einkaufszentrums? Ich weiß es nicht.

淡淡烟草味 · Answer

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

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

小图的点击区域

大图的显示区域

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

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