Vue‑Based Image Magnifier Implementation

When building e‑commerce applications, a common requirement is to display a product’s main image with a magnifier effect. The article presents a Vue‑based solution that determines the mask position from mouse coordinates and moves the large image in the opposite direction to achieve the zoom.

The core principle is that the mask’s top‑left coordinates (maskX, maskY) are proportional to the zoom factor, and the large image is shifted by { left: -maskX * scale + 'px', top: -maskY * scale + 'px' }.

Core HTML Template :

<template>
  <div class="magnifier">
    <!-- Small image container -->
    <div class="small-box" @mouseover="handOver" @mousemove="handMove" @mouseout="handOut">
      <img class="smallPic" :src="`${src}?x-oss-process=image/resize,l_836`" />
      <div class="magnifier-zoom" v-show="showMask" :style="{ background: configs.maskColor, height: configs.maskWidth + 'px', width: configs.maskHeight + 'px', opacity: configs.maskOpacity, transform: transformMask }"></div>
    </div>
    <!-- Large image container -->
    <div class="magnifier-layer" v-show="showMagnifier" :style="{ width: configs.width + 'px', height: configs.height + 'px', left: configs.width + 20 + 'px' }">
      <div class="big-box" :style="{ width: bigWidth + 'px', height: bigHeight + 'px', left: moveLeft, top: moveTop }">
        <div class="big-box-img" :style="{ width: bigWidth - 2 + 'px', height: bigHeight - 2 + 'px' }">
          <img :src="bigSrc" :style="{ maxWidth: bigWidth - 2 + 'px', maxHeight: bigHeight - 2 + 'px' }" />
        </div>
      </div>
    </div>
  </div>
</template>

Key JavaScript Methods :

handOver() {
  // calculate small‑box position once
  this.imgObj = this.$el.getElementsByClassName('small-box')[0];
  this.imgRectNow = this.imgObj.getBoundingClientRect();
  this.showMagnifier = true;
  this.showMask = true;
}

handMove(e) {
  // get current mouse position relative to small image
  let objX = e.clientX - this.imgRectNow.left;
  let objY = e.clientY - this.imgRectNow.top;
  let maskX = objX - this.configs.maskWidth / 2;
  let maskY = objY - this.configs.maskHeight / 2;
  // boundary checks
  maskX = Math.max(0, Math.min(maskX, this.imgRectNow.width - this.configs.maskWidth));
  maskY = Math.max(0, Math.min(maskY, this.imgRectNow.height - this.configs.maskHeight));
  // move mask and background image
  this.transformMask = `translate(${maskX}px, ${maskY}px)`;
  this.moveLeft = -maskX * this.configs.scale + 'px';
  this.moveTop = -maskY * this.configs.scale + 'px';
}

handOut() {
  this.showMagnifier = false;
  this.showMask = false;
}

The component’s data() returns state variables such as imgObj, moveLeft, moveTop, transformMask, showMagnifier, showMask, and an init flag to avoid repeated DOM queries. Computed properties bigWidth and bigHeight calculate the enlarged image size based on the configured scale.

To improve performance, the handOver method now runs the DOM lookup only on the first entry (controlled by init). Additionally, the article discusses two ways to handle incorrect mask positioning after page scroll: listening to the scroll event or updating the image rectangle inside handMove. The implementation chooses the latter.

Usage parameters include the small image URL ( src), large image URL ( bigSrc), and a configs object where developers can set dimensions, mask size, mask color, opacity, and zoom factor. The example uses a 420 × 420 px small box with a default 2× zoom.

In summary, the article demonstrates that the image magnifier’s logic is straightforward: calculate mask coordinates, move the mask, and shift the background image accordingly. The provided code is functional and can be further refined, and readers are encouraged to experiment and discuss improvements.

Recruitment Notice : The author also includes a hiring call for front‑end engineers to join the ZooTeam, providing a contact email [email protected].