js+css实现的图片放大镜效果

使用方法

    var oPreview = $('.preview');
    var oMask = $('.mask');
    var oEnlargeImg = $('.enlargement img');
    var oEnlarge = $('.enlargement');
    var tabEventMap = {
      mouseenter: (e) => {
        oMask.classList.add('active');
        oEnlarge.classList.add('active');
      },
      mouseleave: (e) => {
        oMask.classList.remove('active');
        oEnlarge.classList.remove('active');
      },
      mousemove: (e) => {
        var x = e.clientX - getPosition(oPreview).left;
        var y = e.clientY - getPosition(oPreview).top;
        var _x = x - oMask.offsetWidth / 2;
        var _y = y - oMask.offsetHeight / 2;
        _x = Math.max(0, _x);
        _x = Math.min(_x, oPreview.offsetWidth - oMask.offsetWidth);

        _y = Math.max(0, _y);
        _y = Math.min(_y, oPreview.offsetHeight - oMask.offsetHeight);
        oMask.style.left = _x + 'px';
        oMask.style.top = _y + 'px';

        // 展示比例   (展示区图片宽度 - 展示区宽度) / (预览区宽度 - 遮罩层宽度)
        var moveX = (oPreview.offsetWidth - oMask.offsetWidth) /
          (oEnlargeImg.offsetWidth - oEnlarge.offsetWidth);
        var moveY = (oPreview.offsetHeight - oMask.offsetHeight) /
          (oEnlargeImg.offsetHeight - oEnlarge.offsetHeight);
        oEnlargeImg.style.marginLeft = -_x * moveX + 'px';
        oEnlargeImg.style.marginTop = -_y * moveY + 'px';
      }
    }
    oPreview.addEventListener('mouseenter', handle);
    oPreview.addEventListener('mouseleave', handle);
    oPreview.addEventListener('mousemove', handle)

    function handle(e) {
      if (tabEventMap[e.type] && typeof tabEventMap[e.type] === 'function') {
        tabEventMap[e.type](e);
      }
    }