实现一个预览图(放大镜)效果

1.鼠标经过中盒子,我们可以将隐藏的大盒子显示出来,离开中盒子,则会自动将大盒子隐藏起来。ps:添加一个计时函数,可以大幅度增加用户体验。

 //鼠标经过中盒子效果
    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)//延时0.2秒隐藏,增加用户体验
    }

2.鼠标经过大盒子,显示定位的阴影盒子。主要根据获取鼠标与中盒子的坐标相对定位来实现此功能。

//鼠标经过中等盒子显示阴影
    const layer = document.querySelector('.layer')
    middle.addEventListener('mouseenter', function () {
      layer.style.display = 'block'
    })
    middle.addEventListener('mouseleave', function () {
      layer.style.display = 'none'
    })

3.最后一步,也是最关键的一个步骤,根据中盒子的宽度进行适当的调整,使中盒子里面的阴影盒子随着鼠标移动而移动,使之不会超出中盒子的范围,并且将中盒子的图片投影到隐藏的大盒子里面,使之实现图片的放大功能。

  //阴影盒子跟随鼠标移动效果
    middle.addEventListener('mousemove', function (e) {
      //获取中等盒子的坐标
      let middleX = middle.getBoundingClientRect().left//x轴
      let middleY = middle.getBoundingClientRect().top + document.documentElement.scrollTop//y轴为鼠标坐标+页面向下滚动的距离
      //获取鼠标的坐标
      let mouseX = e.pageX
      let mouseY = e.pageY
      // 盒子的坐标 = 鼠标坐标 - 中等盒子坐标
      let x = mouseX - middleX
      let y = mouseY - middleY
      //阴影盒子跟随坐标显示效果
      if (1) {
        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'
      }
    })