兰州最好的网站建设公司青岛网站优化排名
目录
实现这种图片切换的和放大镜的效果：
第一步：图片的切换
第二步：鼠标经过中等盒子，显示隐藏大盒子
第三步：黑色遮罩盒子跟着鼠标来移动
遮罩层盒子移动的坐标：
总结一下~本章节对我有很大的收获，希望对你也是！！！
素材自取，一定要手码三遍！！！素材自取
实现这种图片切换的和放大镜的效果：
放大镜样例
第一步：图片的切换
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 = nullsmall.addEventListener('mouseover', function (e) {if (e.target.tagName === 'IMG') {// 排他思想 干掉以前的this.querySelector('.active').classList.remove('active')// 先移除以前的active 然后添加当前img父亲<i>标签的activee.target.parentNode.classList.add('active')// 拿到小盒子里面的图片// console.log(e.target.src)// 让中等盒子里的图片换成小盒子里的图片即可middle.querySelector('img').src = e.target.srcimg = e.target.src}})// 鼠标经过中等盒子，显示隐藏大盒子middle.addEventListener('mouseenter', show)middle.addEventListener('mouseleave', hide)let timeId = nullfunction 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().leftlet 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 = 0if (x < 100) mx = 0if (x >= 100 && x <= 300) mx = x - 100if (x > 300) mx = 300 - 100if (y < 100) my = 0if (y >= 100 && y <= 300) my = y - 100if (y > 300) my = 300 - 100layer.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'}})