原生js实现淘宝图片放大功能

目录结构：

HTML:

CSS:

@charset "utf-8";

html, body {
  width: 100%;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}
#container {
  position: relative;
  top: 60px;
  left: 200px;
}
#container .leftView {
  width: 400px;
  height: 400px;
}
#container .leftView .mask {
  width: 160px;
  height: 160px;
  position: absolute;
  display: none;
  cursor: move;
  top: 0;
  left: 0;
  background: rgba(50, 153, 248, 0.4);
}
#container .leftView .small {
  width: 100%;
  height: 100%;
}
#container .rightView {
  width: 400px;
  height: 400px;
  display: none;
  position: absolute;
  top: 0;
  left: 450px;
  overflow: hidden;
}
#container .rightView .big {
  position: absolute;
  top: 0;
  left: 0;
}

JS:

((function() {
  'use strict'
  // 选择器
  function $(el) {
    return document.querySelector(el)
  }
  // 获取元素
  let container = $('#container')
  let leftView = $('.leftView')
  let mask = $('.mask')
  let smallImg = $('.small')
  let rightView = $('.rightView')
  let bigImg = $('.big')
  // 显示放大遮罩与放大的图片容器
  leftView.addEventListener('mouseover', function() {
    mask.style.display = 'block'
    rightView.style.display = 'block'
  }, false)
  // 隐藏放大遮罩与放大的图片容器
  leftView.addEventListener('mouseout', function() {
    mask.style.display = 'none'
    rightView.style.display = 'none'
  })
  // 放大遮罩移动放大图片
  leftView.addEventListener('mousemove', function(evt){
    evt = evt || window.event
    // 获取当前鼠标的位置
    let currentMouseX = evt.pageX
    let currentMouseY = evt.pageY
    // 获取要放大图片左侧与顶部的偏移距离
    let offsetLeft = container.offsetLeft
    let offsetTop = container.offsetTop
    // 获取放大遮罩的大小
    let maskWidth = mask.offsetWidth
    let maskHeight = mask.offsetHeight
    // 计算鼠标移动后放大遮罩的位置 位置 = 当前鼠标的位置 - 偏移距离 - 放大遮罩大小/2
    let zoomMaskX = currentMouseX - offsetLeft - maskWidth / 2
    let zoomMaskY = currentMouseY - offsetTop - maskHeight / 2
    // 限制鼠标上侧与左侧的范围
    if (zoomMaskX <= 0) {
      zoomMaskX = 0
    }
    if (zoomMaskY <= 0) {
      zoomMaskY = 0
    }
    // 限制鼠标右侧与下侧的范围
    let maxScopeX = leftView.offsetWidth - maskWidth
    if (zoomMaskX >= maxScopeX) {
      zoomMaskX = maxScopeX
    }
    let maxkScopeY = leftView.offsetHeight - maskHeight
    if (zoomMaskY >= maxkScopeY) {
      zoomMaskY = maxkScopeY
    }
    mask.style.left = zoomMaskX + 'px'
    mask.style.top = zoomMaskY + 'px'
    // 计算图片放大比例 比例= (大图长度 - 大图父容器长度) / (小图父容器长度 - 放大遮罩长度)
    let zommProportion = (bigImg.offsetWidth - rightView.offsetWidth) / (leftView.offsetWidth - maskWidth)
    bigImg.style.left = -zommProportion * zoomMaskX + 'px'
    bigImg.style.top = -zommProportion * zoomMaskY + 'px'
  }, false)
})())

效果如下: 点击查看