商品放大镜

// html代码
<div style="width:400px;height:400px;">
  <div onmouseenter="addImgMagnifier(this, './1.jpg')">
    <img width="100%" height="100%" src="https://image.azureedge.net/0171484_-63g_S.jpeg"/>
  </div>
</div>
// css 样式
.zoom-mask {
  width: 200px;
  height: 200px;
  background: pink;
  opacity: 0.5;
  position: absolute;
  z-index: 2;
}

.zoom-div {
  width: 600px;
  height: 600px;
  border: 1px solid #dddddd;
  background-repeat: no-repeat;
  background-size: 1200px 1200px;
  z-index: 2;
  position: absolute;
  background-color: #FFFFFF;
  opacity: 1;
  top: 0;
  right: -600px;
}
// js 方法
/**
 * 方法说明
 * @method addImgMagnifier
 * @param {string} self 图片元素的父元素
 * @param {string} imgUrl 放大图片的地址
 * @return {null} 无返回值
*/
function addImgMagnifier(self, imgUrl) {
  let zoomMaskEle = null;
  let zoomDivEle = null;
  function setPosition() {
    $(self).css("position", "relative")
    $(self).parent().css("position", "relative")
  }
  function addZoomMaskEle() {
    zoomMaskEle = $("<div class='zoom-mask'></div>")
    $(self).append(zoomMaskEle)
  }
  function addZoomDivEle() {
    zoomDivEle = $("<div class='zoom-div'></div>")
    zoomDivEle.css('background-image', "url(" + imgUrl + ")")
    $(self).after(zoomDivEle)
  }
  function removeZoomEle() {
    zoomMaskEle && zoomMaskEle.remove()
    zoomDivEle && zoomDivEle.remove()
  }
  function addZoomEle() {
    setPosition()
    addZoomMaskEle()
    addZoomDivEle()
  }
  addZoomEle()
  $(self).mousemove(function(event) {
    // 获取当前鼠标的位置
    let xAxis = event.pageX - $(self).offset().left - zoomMaskEle.width() / 2
    let yAxis = event.pageY - $(self).offset().top - zoomMaskEle.height() / 2
    console.log(xAxis, yAxis)
    // 判断放大镜遮罩是否移出左右边界
    if(xAxis < 0) {
      // 放大镜遮罩移出左边界
      zoomMaskEle.css('left', '0')
    } else if(xAxis > ($(self).width() - zoomMaskEle.width())) {
      // 放大镜遮罩移出右边界
      zoomMaskEle.css('left', ($(self).width() - zoomMaskEle.width()) + 'px')
    } else {
      zoomMaskEle.css('left', xAxis + 'px')
    }
    // 判断放大镜遮罩是否移出上下边界
    if(yAxis < 0) {
      // 放大镜遮罩移出上边界
      zoomMaskEle.css('top', '0')
    } else if(yAxis > ($(self).height() - zoomMaskEle.height())) {
      // 放大镜遮罩移出右边界
      zoomMaskEle.css('top', ($(self).height() - zoomMaskEle.height()) + 'px')
    } else {
      zoomMaskEle.css('top', yAxis + 'px')
    }
    let zoomScale = 1200 / 400   // 比例计算 大图片的大小 除以 小图片的大小
    zoomDivEle.css('background-position', -(zoomMaskEle.position().left) * zoomScale + 'px' + ' ' + -(zoomMaskEle.position().top) * zoomScale + 'px')
  })
  $(self).mouseleave(function() {
    removeZoomEle()
  })
}