JavaScript放大镜效果

// 1. 获取三个盒子，图片切换效果
const small = document.querySelector('.small')  // 小盒子
const middle = document.querySelector('.middle')// 中盒子
const large = document.querySelector('.large')  // 大盒子

// 1.1事件委托 冒泡事件侦听的是图片 
small.addEventListener('mouseover', function (e) {
  // 判断条件：鼠标经过图片
  if (e.target.tagName === 'IMG') {
    // console.log(11)
    // 排查思想 干掉以前的类
    this.querySelector('.active').classList.remove('active')
    // 当前元素的亲爸爸li添加 active
    e.target.parentNode.classList.add('active')
    // 拿到当前的小图片的src
    // console.log(e.target.src)
    // 让中等盒子里面的图片src 更换为小图片的src
    middle.querySelector('img').src = e.target.src
    // 大盒子更换的是背景图片
    large.style.backgroundImage = `url(${e.target.src})`
  }
})

// 2. 鼠标经过中盒子，右侧会显示放大镜效果的大盒子
middle.addEventListener('mouseenter', show)
middle.addEventListener('mouseleave', hide)
let timeId = null
// 显示函数 显示大盒子
function show() {
  // 先清除定时器
  clearTimeout(timeId)
  large.style.display = 'block'
}
// 隐藏函数 隐藏大盒子
function hide() {
  timeId = setTimeout(function () {
    large.style.display = 'none'
  }, 200)
}

// 3. 鼠标经过大盒子，显示隐藏 大盒子
large.addEventListener('mouseenter', show)
large.addEventListener('mouseleave', hide)

// 4. 鼠标经过中等盒子，显示隐藏 黑色遮罩层
const layer = document.querySelector('.layer')
middle.addEventListener('mouseenter', function () {
  layer.style.display = 'block'
})
middle.addEventListener('mouseleave', function () {
  layer.style.display = 'none'
})

// 5. 移动黑色遮罩盒子 
middle.addEventListener('mousemove', function (e) {
  // 鼠标在middle盒子中的坐标 = 鼠标在页面中的坐标 - middle中等盒子的坐标
  // console.log(e.pageX) // 鼠标在页面中的坐标
  // middle 盒子在页面中的坐标
  // console.log(middle.getBoundingClientRect().left)
  let x = e.pageX - middle.getBoundingClientRect().left
  let y = e.pageY - middle.getBoundingClientRect().top - document.documentElement.scrollTop
  // console.log(x, y)
  // 黑色遮罩移动 在 middle 盒子内 限定移动的距离
  if (x >= 0 && x <= 400 && y >= 0 && y <= 400) {
    // 黑色盒子不是一直移动的
    // 声明2个变量 黑盒子移动的变量
    let mx = 0, my = 0
    if (x < 100) mx = 0
    if (x >= 100 && x <= 300) mx = x - 100
    if (x > 300) mx = 200

    if (y < 100) my = 0
    if (y >= 100 && y <= 300) my = y - 100
    if (y > 300) my = 200
    layer.style.left = mx + 'px'
    layer.style.top = my + 'px'

    // 大盒子的背景图片要跟随 中等盒子移动 存在的关系2倍
    large.style.backgroundPositionX = -2 * mx + 'px'
    large.style.backgroundPositionY = -2 * my + 'px'
  }
})