JavaScript implementation of magnifying glass details

 <div class="wrap">
    <!-- Thumbnail and Mask -->
    <div id="small">
      <img src="img/1.jpg" alt="" >
      <div id="mark"></div>
    </div>
    <!-- Enlarged image at the same scale -->
    <div id="big">
      <img src="img/2.jpg" alt="" id="bigimg">
    </div>
  </div>

 * {
      margin: 0;
      padding: 0;
    }
    .wrap {
      width: 1500px;
      margin: 100px auto;
    }

    #small {
      width: 432px;
      height: 768px;
      float: left;
      position: relative;
    }

    #big {
      /* background-color: seagreen; */
      width: 768px;
      height: 768px;
      float: left;
      /* The part beyond the viewfinder is hidden*/
      overflow: hidden;
      margin-left: 20px;
      position: relative;
      display: none;
    }

    #bigimg {
      /* width: 864px; */
      position: absolute;
      left: 0;
      top: 0;
    }

    #mark {
      width: 220px;
      height: 220px;
      background-color: #fff;
      opacity: .5;
      position: absolute;
      left: 0;
      top: 0;
      /* Mouse arrow style*/
      cursor: move;
      display: none;
    }

// Get the small image and mask, large image, and large box var small = document.getElementById("small")
    var mark = document.getElementById("mark")
    var big = document.getElementById("big")
    var bigimg = document.getElementById("bigimg")
    // Get mouse movement events in the small image area; the mask follows the mouse movement small.onmousemove = function (e) {
      // Get the offset of the mask relative to the thumbnail (mouse coordinates - thumbnail offset relative to body - half of the width or height of the mask)
      var s_left = e.pageX - mark.offsetWidth / 2 - small.offsetLeft
      var s_top = e.pageY - mark.offsetHeight / 2 - small.offsetTop
      // The mask can only be moved within the thumbnail, so the threshold value of the mask offset (relative to the thumbnail value) needs to be calculated
      var max_left = small.offsetWidth - mark.offsetWidth;
      var max_top = small.offsetHeight - mark.offsetHeight;
      // When the mask moves, the large image on the right also moves (for every 1px the mask moves, the image needs to move n times the distance in the opposite direction)
      var n = big.offsetWidth / mark.offsetWidth
      // Judge before the mask follows the mouse movement: the offset of the mask relative to the thumbnail cannot exceed the range, and it needs to be reassigned if it exceeds the range (the critical value has been calculated above: max_left and max_top)
      // Determine the horizontal boundary if (s_left < 0) {
        s_left = 0
      } else if (s_left > max_left) {
        s_left = max_left
      }
      //Judge the vertical boundary if (s_top < 0) {
        s_top = 0
      } else if (s_top > max_top) {
        s_top = max_top
      }
      // Assign values ​​to the mask left and top (dynamically? Because e.pageX and e.pageY are changing quantities), move it!
      mark.style.left = s_left + "px";
      mark.style.top = s_top + "px";
      // Calculate the distance the large image moves var levelx = -n * s_left;
      var verticaly = -n * s_top;
      // Make the picture move bigimg.style.left = levelx + "px";
      bigimg.style.top = verticaly + "px";
    }
    // The mask and follow-up style will be displayed only when the mouse moves into the small picture, and will disappear when the mouse moves out of the small picture small.onmouseenter = function () {
      mark.style.display = "block"
      big.style.display="block"
    }
    small.onmouseleave = function () {
      mark.style.display = "none"
      big.style.display="none"
    }