【JavaScript】实战案例-放大镜效果、图片切换

目录

实现这种图片切换的和放大镜的效果： 

第一步：图片的切换

第二步：鼠标经过中等盒子，显示隐藏大盒子

第三步：黑色遮罩盒子跟着鼠标来移动

遮罩层盒子移动的坐标：

总结一下~本章节对我有很大的收获，希望对你也是！！！

---

素材自取，一定要手码三遍！！！素材自取 

实现这种图片切换的和放大镜的效果： 

 

放大镜样例

 

第一步：图片的切换

1.实现图片的切换以及小li的active类的删除和增加 

2.对小li的active增删后，即可得到当前小li图片的地址：

console.log(e.target.src)

3.对middle图片地址进行更换即可：

middle.querySelector('img').src = e.target.src

第二步：鼠标经过中等盒子，显示隐藏大盒子

1.用到鼠标经过和离开，鼠标经过中盒子，大盒子利用display来显示和隐藏

2.鼠标离开不会立马消失，而是有200ms的延时，用户体验更好，所以经量使用定时器做一个延时setTimeout

3.显示和隐藏也经量定义一个函数，因为鼠标经过离开中等盒子，会显示隐藏，同时，鼠标经过大盒子，也会显示和隐藏

4.给大盒子里面的背景图片一个默认的第一张图片

第三步：黑色遮罩盒子跟着鼠标来移动

1.先做鼠标经过小盒子small盒子，显示隐藏黑色遮罩的盒子

2.让黑色遮罩跟着鼠标来走，需要用到鼠标移动事件mousemove

3.让黑色盒子的移动的核心思想：不断把鼠标在small盒子内的坐标给黑色遮罩层，这样遮罩层就可以跟着移动了

算法：

1)得到鼠标在页面中的坐标，利用事件对象的pageX

2)得到middle中等盒子在页面中的坐标 middle.getBoundingClientRect()

3)鼠标在middle盒子中的坐标 = 鼠标在页面中的坐标 - middle中等盒子的坐标

4)黑色遮罩层不断得到 鼠标在middle盒子中的坐标 就可以移动起来了

4.限定遮罩层的盒子只能在millde内部移动，需要添加判断：

1）限定水平方向 大于等于0 并且小于等于400

2）限定垂直方向 大于等于0 并且小于等于400

遮罩层盒子移动的坐标：

1）声明一个mx作为移动的距离

2）水平坐标x如果小于等于100，则移动的距离mx就是 0 不应该移动

3）水平座标 如果大于等于100 并且小于300， 移动的距离就是mx - 100 （100是遮罩层盒子自身宽度的一半）

4）水平坐标 如果大于等于300 ，移动的距离就是mx从200不约过在移动了

5）其实我们发现水平移动，就在100 ~ 200之间的

6）垂直同理

大盒子800 * 800 的背景图片 跟着middle盒子400 * 400移动 存在关系是2倍

 

我就发现当移动大盒子背景的时候是跟我同方向的，而我们需要它反方向移动，添加负号即可

JavaScript实现：

    const middle = document.querySelector('.middle')
    const small = document.querySelector('.small')
    const large = document.querySelector('.large')


    let img = null
    small.addEventListener('mouseover', function (e) {
      if (e.target.tagName === 'IMG') {
        // 排他思想 干掉以前的
        this.querySelector('.active').classList.remove('active')
        // 先移除以前的active 然后添加当前img父亲<i>标签的active
        e.target.parentNode.classList.add('active')
        // 拿到小盒子里面的图片
        // console.log(e.target.src)
        // 让中等盒子里的图片换成小盒子里的图片即可
        middle.querySelector('img').src = e.target.src
        img = e.target.src
      }
    })


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

    let timeId = null
    function show() {
      clearTimeout(timeId)
      large.style.backgroundImage = `url(${img})`
      large.style.display = 'block'
    }

    function hide() {
      // 延时器
      timeId = setTimeout(function () {
        large.style.display = 'none'
      }, 249)
    }


    large.addEventListener('mouseenter', showLarge)
    large.addEventListener('mouseleave', hideLarge)
    function showLarge() {
      large.style.display = 'block'
    }

    function hideLarge() {
      large.style.display = 'none'
    }



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

    middle.addEventListener('mouseleave', function () {
      layer.style.display = 'none'
    })

    // 移动黑色遮罩盒子
    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)
      // console.log(y)
      // 移动黑色遮罩层
      layer.style.left = x + 'px'
      layer.style.top = y + 'px'

      // 黑色遮罩层移动 要在middle黑子内 限定移动距离
      if (x >= 0 && x <= 400 && y >= 0 && y <= 400) {
        // 黑色盒子不是一直移动的
        // 声明两个变量 黑色盒子移动的变量
        let mx = 0, my = 0
        if (x < 100) mx = 0
        if (x >= 100 && x <= 300) mx = x - 100
        if (x > 300) mx = 300 - 100

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

        // 大盒子800 * 800 的背景图片 跟着middle盒子400 * 400移动 存在关系是2倍
        large.style.backgroundPositionX = -2 * mx + 'px'
        large.style.backgroundPositionY = -2 * my + 'px'
      }
    })

总结一下~本章节对我有很大的收获，希望对你也是！！！