javascript - Is there any simple js that can be used to zoom in and out by clicking on the image?

Question

I want to reference a js that can zoom in and out of pictures in html.
It is best to use two kinds of pictures, one big picture and one small picture.
I want to use the comment and picture sharing function of the mall
Is there a simpler one, I don’t quite understand

Answer 1

Generally, this kind of function requires a lot of functions, such as the animation effect of a large picture popping up when clicked, a mask layer, whether the picture needs to be turned into a controllable queue, etc. So when there are more functions, there will naturally be more codes. Generally, either Make it into a JQ extended object method plug-in, or implement it as a js constructor, ES6 class, etc.

If you need the simplest function of clicking a small picture to pop up a large picture - - here is the most original one. .
View the example directly: https://jsfiddle.net/v1sgnuhp/

Click area of ​​thumbnail

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

Display area of ​​large 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 = '';
    }
  };

From "The Art of Javascript Dom Programming" with slight modifications. . . I remember reading this book when I first learned JS

Answer 2

http://photoswipe.com/ Isn’t this pretty good?