js放大镜原理图

<div class="img-magnifier-container">
  <img id="myimage" src="your-image.jpg" width="600" height="400" alt="Your Image"/>
  <div id="myresult" class="magnifier"></div>
</div>

.img-magnifier-container {
  position: relative;
}

.magnifier {
  position: absolute;
  border: 3px solid #000;
  border-radius: 50%;
  cursor: none;
  width: 100px;
  height: 100px;
  overflow: hidden;
  display: none;
}

.magnifier img {
  position: absolute;
  top: 0;
  left: 0;
}

var img = document.getElementById('myimage');
var magnifier = document.getElementById('myresult');

img.addEventListener('mousemove', moveMagnifier);
img.addEventListener('mouseleave', hideMagnifier);

function moveMagnifier(e) {
  var imgRect = img.getBoundingClientRect();
  var magnifierWidth = magnifier.offsetWidth / 2;
  var magnifierHeight = magnifier.offsetHeight / 2;

  var x = e.pageX - imgRect.left - window.pageXOffset - magnifierWidth;
  var y = e.pageY - imgRect.top - window.pageYOffset - magnifierHeight;

  if (x > img.width - magnifier.offsetWidth) {
    x = img.width - magnifier.offsetWidth;
  }
  if (x < 0) {
    x = 0;
  }
  if (y > img.height - magnifier.offsetHeight) {
    y = img.height - magnifier.offsetHeight;
  }
  if (y < 0) {
    y = 0;
  }

  magnifier.style.left = x + 'px';
  magnifier.style.top = y + 'px';
  magnifier.style.display = 'block';

  var bgX = -x * 2;
  var bgY = -y * 2;
  magnifier.style.backgroundImage = 'url("' + img.src + '")';
  magnifier.style.backgroundSize = (img.width * 2) + 'px ' + (img.height * 2) + 'px';
  magnifier.style.backgroundPosition = bgX + 'px ' + bgY + 'px';
}

function hideMagnifier() {
  magnifier.style.display = 'none';
}