原生 JS 手写一个优雅的图片预览功能，带你吃透背后原理

<div id="list">
    <img class="item" src="...." />
    ............
</div>

/* 图片预览样式 */
.modal {
  touch-action: none;
  user-select: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.75);
}
.modal > img {
  position: absolute;
  padding: 0;
  margin: 0;
  transform: translateZ(0);
}

let cloneEl = null
let originalEl = null
document.getElementById('list').addEventListener('click', function (e) {
  e.preventDefault()
  if (e.target.classList.contains('item')) {
    originalEl = e.target // 缓存原始图DOM节点
    cloneEl = originalEl.cloneNode(true) // 克隆图片
    originalEl.style.opacity = 0
    openPreview() // 打开预览
  }
})

function openPreview() {
  // 创建蒙层
  const mask = document.createElement('div')
  mask.classList.add('modal')
  // 添加在body下
  document.body.appendChild(mask)
  // 注册蒙层的点击事件，关闭弹窗
  const clickFunc = function () {
    document.body.removeChild(this)
    originalEl.style.opacity = 1
    mask.removeEventListener('click', clickFunc)
  }
  mask.addEventListener("click", clickFunc)
  mask.appendChild(cloneEl) // 添加图片
}

// 用于修改样式的工具类，并且可以减少回流重绘，后面代码中会频繁用到
function changeStyle(el, arr) {
  const original = el.style.cssText.split(';')
  original.pop()
  el.style.cssText = original.concat(arr).join(';') + ';'
}

// ......
// 添加图片
const { top, left } = originalEl.getBoundingClientRect()
changeStyle(cloneEl, [`left: ${left}px`, `top: ${top}px`])
mask.appendChild(cloneEl)

const { innerWidth: winWidth, innerHeight: winHeight } = window

// 计算自适应屏幕的缩放值
function adaptScale() {
  const { offsetWidth: w, offsetHeight: h } = originalEl // 获取文档中图片的宽高
  let scale = 0
  scale = winWidth / w
  if (h * scale > winHeight - 80) {
    scale = (winHeight - 80) / h
  }
  return scale
}

// 移动图片到屏幕中心位置
  const originalCenterPoint = { x: offsetWidth / 2 + left, y: offsetHeight / 2 + top }
  const winCenterPoint = { x: winWidth / 2, y: winHeight / 2 }
  const offsetDistance = { left: winCenterPoint.x - originalCenterPoint.x + left, top: winCenterPoint.y - originalCenterPoint.y + top }
  const diffs = { left: ((adaptScale() - 1) * offsetWidth) / 2, top: ((adaptScale() - 1) * offsetHeight) / 2 }
  changeStyle(cloneEl, ['transition: all 0.3s', `width: ${offsetWidth * adaptScale() + 'px'}`, `transform: translate(${offsetDistance.left - left - diffs.left}px, ${offsetDistance.top - top - diffs.top}px)`])
  // 动画结束后消除定位重置的偏差
  setTimeout(() => {
    changeStyle(cloneEl, ['transition: all 0s', `left: 0`, `top: 0`, `transform: translate(${offsetDistance.left - diffs.left}px, ${offsetDistance.top - diffs.top}px)`])
    offset = { left: offsetDistance.left - diffs.left, top: offsetDistance.top - diffs.top } // 记录值
  }, 300)

let origin = 'center'
let scale = 1
// 注册事件
mask.addEventListener('mousewheel', zoom, { passive: false })

// 滚轮缩放
const zoom = (event) => {
  if (!event.deltaY) {
    return
  }
  event.preventDefault()
  origin = `${event.offsetX}px ${event.offsetY}px`
  
  if (event.deltaY < 0) {
    scale += 0.1 // 放大
  } else if (event.deltaY > 0) {
    scale >= 0.2 && (scale -= 0.1) // 缩小
  }
  changeStyle(cloneEl, ['transition: all .15s', `transform-origin: ${origin}`, `transform: translate(${offset.left + 'px'}, ${offset.top + 'px'}) scale(${scale})`])
}

let startPoint = { x: 0, y: 0 } // 记录初始触摸点位
let isTouching = false // 标记是否正在移动
let isMove = false // 正在移动中，与点击做区别

// 鼠标/手指按下
window.addEventListener('pointerdown', function (e) {
  e.preventDefault()
  isTouching = true
  startPoint = { x: e.clientX, y: e.clientY }
})
// 鼠标/手指抬起
window.addEventListener('pointerup', function (e) {
  isTouching = false
  setTimeout(() => {
    isMove = false
  }, 300);
})
// 鼠标/手指移动
window.addEventListener('pointermove', (e) => {
  if (isTouching) {
    isMove = true
    // 单指滑动/鼠标移动
    offset = {
      left: offset.left + (e.clientX - startPoint.x),
      top: offset.top + (e.clientY - startPoint.y),
    }
    changeStyle(cloneEl, [`transform: translate(${offset.left + 'px'}, ${offset.top + 'px'}) scale(${scale})`, `transform-origin: ${origin}`])
    // 注意移动完也要更新初始点位，否则图片会加速逃逸可视区域
    startPoint = { x: e.clientX, y: e.clientY }
  }
})

let touches = new Map() // 触摸点数组

window.addEventListener('pointerdown', function (e) {
  e.preventDefault()
  touches.set(e.pointerId, e) // TODO: 点击存入触摸点
  isTouching = true
  startPoint = { x: e.clientX, y: e.clientY }
  if (touches.size === 2) { 
        // TODO: 判断双指触摸，并立即记录初始数据
  }
})

window.addEventListener('pointerup', function (e) {
  touches.delete(e.pointerId) // TODO: 抬起时移除触摸点
  // .....
})

window.addEventListener('pointermove', (e) => {
  if (isTouching) {
    isMove = true
    if (touches.size < 2) {
      // TODO: 单指滑动，或鼠标拖拽
    } else {
      // TODO: 双指缩放
      touches.set(e.pointerId, e) // 更新点位数据
      // .......
    }
  }
})

window.addEventListener('pointercancel', function (e) {
  touches.clear() // 可能存在特定事件导致中断，所以需要清空
})

// 获取距离
function getDistance() {
  const touchArr = Array.from(touches)
  if (touchArr.length < 2) {
    return 0
  }
  const start = touchArr[0][1]
  const end = touchArr[1][1]
  return Math.hypot(end.x - start.x, end.y - start.y)
}

let touches = new Map() // 触摸点数组
let lastDistance = 0 // 记录最后的双指初始距离
let lastScale = 1 // 记录下最后的缩放值

window.addEventListener('pointerdown', function (e) {
  // .........
  if (touches.size === 2) { // TODO: 判断双指触摸，并立即记录初始数据
    lastDistance = getDistance()
    lastScale = scale // 把当前的缩放值存起来
  }
})

window.addEventListener('pointerup', function (e) {
// .........
  if (touches.size <= 0) {
    // .........
  } else {
    const touchArr = Array.from(touches)
    // 双指如果抬起了一个，可能还有单指停留在触屏上继续滑动，所以更新点位
    startPoint = { x: touchArr[0][1].clientX, y: touchArr[0][1].clientY }
  }
  // .......
})

window.addEventListener('pointermove', (e) => {
  e.preventDefault()
  if (isTouching) {
    isMove = true
    if (touches.size < 2) { // 单指滑动
      // .......
    } else {
      // 双指缩放
      touches.set(e.pointerId, e)
      const ratio = getDistance() / lastDistance // 比较距离得出比例
      scale = ratio * lastScale // 修改新的缩放值
      changeStyle(cloneEl, ['transition: all 0s', `transform: translate(${offset.left + 'px'}, ${offset.top + 'px'}) scale(${scale})`, `transform-origin: ${origin}`])
    }
  }
})

window.addEventListener('pointermove', (e) => {
  // .......
      // 双指缩放
      const ratio = getDistance() / lastDistance // 比较距离得出比例
      scale = ratio * lastScale // 修改新的缩放值    
      const touchArr = Array.from(touches)
      const start = touchArr[0][1]
      const end = touchArr[1][1]
      x = (start.offsetX + end.offsetX) / 2
      y = (start.offsetY + end.offsetY) / 2
      origin = `${x}px ${y}px`
      changeStyle(cloneEl, ['transition: all 0s', `transform: translate(${offset.left + 'px'}, ${offset.top + 'px'}) scale(${scale})`, `transform-origin: ${origin}`])
  // ........
})

let scaleOrigin = { x: 0, y: 0, }
// 获取中心改变的偏差
function getOffsetCorrection(x = 0, y = 0) {
  const touchArr = Array.from(touches)
  if (touchArr.length === 2) {
    const start = touchArr[0][1]
    const end = touchArr[1][1]
    x = (start.offsetX + end.offsetX) / 2
    y = (start.offsetY + end.offsetY) / 2
  }
  origin = `${x}px ${y}px`
  const offsetLeft = (scale - 1) * (x - scaleOrigin.x) + offset.left
  const offsetTop = (scale - 1) * (y - scaleOrigin.y) + offset.top
  scaleOrigin = { x, y }
  return { left: offsetLeft, top: offsetTop }
}

window.addEventListener('pointermove', (e) => {
  // .......
      // 双指缩放
      touches.set(e.pointerId, e)
      const ratio = getDistance() / lastDistance
      scale = ratio * lastScale
      offset = getOffsetCorrection()
      changeStyle(cloneEl, ['transition: all 0s', `transform: translate(${offset.left + 'px'}, ${offset.top + 'px'}) scale(${scale})`, `transform-origin: ${origin}`])
  // ........
})

// 滚轮缩放
const zoom = (event) => {
  // ........
  offset = getOffsetCorrection(event.offsetX, event.offsetY)
  changeStyle(cloneEl, ['transition: all .15s', `transform-origin: ${origin}`, `transform: translate(${offset.left + 'px'}, ${offset.top + 'px'}) scale(${scale})`])
}