【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' } })

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