使用原生JavaScript实现放大镜效果

.outer { display: flex; } .box { /* 可以改变这里的宽高 */ width: 400px; height: 400px; background: green; position: relative; margin-left: 100px; } .box img { width: 100%; height: 100%; } .box2 { /* 可以改变这里的宽高 */ width: 600px; height: 600px; background-image: url(./33.jpg-600); background-repeat: no-repeat; background-size: 400% 400%; display: none; margin-left: 20px; } .mask { /* 可以改变这里的宽高 */ width: 200px; height: 200px; background: rgba(0, 0, 0, .5); display: none; position: absolute; }

        // 拿到三个盒子的元素 const mask = document.querySelector('.mask') const box1 = document.querySelector('.box') const box2 = document.querySelector('.box2') // 作用：遮罩层和放大盒子的显示与隐藏 box1.addEventListener('mouseenter', () => { mask.style.display = 'block' box2.style.display = 'block' }) box1.addEventListener('mouseleave', () => { mask.style.display = 'none' box2.style.display = 'none' }) // 鼠标移入盒子 box1.addEventListener('mousemove', (e) => { // e.pageX 获取鼠标在当前可视窗口 x轴 位置 // box1.getBoundingClientRect().left 获取当前盒子距离左侧位置（范围：可视窗口） // document.documentElement.scrollTop 距离顶部位置 // 之所以减去一个距离顶部位置，是因为getBoundingClientRect这个方法是相对于可视窗口的， // 如果我们当前的元素到了出现在滚动条的情况下，要减去它的一个滚动条高度，这样才不会错位。 let x = e.pageX - box1.getBoundingClientRect().left - document.documentElement.scrollLeft let y = e.pageY - box1.getBoundingClientRect().top - document.documentElement.scrollTop  // 减去该盒子位置距离顶部的距离 // 规定遮罩层在当前这个父盒子里面移动 if (x >= 0 && x <= box1.offsetWidth && y >= 0 && y <= box1.offsetHeight) { // 初始化 x 和 y 可移动的位置 let mx = 0 let my = 0 // -------------------处理遮罩层移动------------------- let maskWidth = mask.offsetWidth let maskWidthHalf = mask.offsetWidth / 2 let currentBoxWidth = box1.offsetWidth let maskHeight = mask.offsetHeight let maskHeightHalf = mask.offsetHeight / 2 let currentBoxHeight = box1.offsetHeight // 处理 x 部分 // 在 [遮罩自身一半] 以内，无法移动 if (x = maskWidthHalf && x <= currentBoxWidth - maskWidthHalf) mx = x - maskWidthHalf // 到达 [盒子 - 遮罩一半] 就不能再移动了 if (x > currentBoxWidth - maskWidthHalf) mx = currentBoxWidth - maskWidth // 处理 y 部分（同理） if (y = maskHeightHalf && y <= currentBoxHeight - maskHeightHalf) my = y - maskHeightHalf if (y > currentBoxHeight - maskHeightHalf) my = currentBoxHeight - maskHeight // 让遮罩层移动 mask.style.left = mx + 'px' mask.style.top = my + 'px' // -------------------处理背景图片移动------------------- // 1. 背景被放大的倍数 == 盒子1的宽度 / 遮盖层宽度 let scaleWidth = (box1.offsetWidth / mask.offsetWidth) * 100 let scaleHeight = (box1.offsetHeight / mask.offsetHeight) * 100 box2.style.backgroundSize = `${scaleWidth + '%'} ${scaleHeight + '%'}` console.log(scaleWidth, '放大倍数'); // 2. 行走的步数 = 放大盒子宽度 / 遮盖层宽度 let stepWidth = (box2.offsetWidth / mask.offsetWidth) let stepHeight = (box2.offsetHeight / mask.offsetHeight) // 这里加负号是因为，它需要从反方向进行移动的，正数则是往右移动 box2.style.backgroundPositionX = -stepWidth * mx + 'px' box2.style.backgroundPositionY = -stepHeight * my + 'px' console.log(mx, 'box1可移动总距离 = box1宽 - 遮罩层宽'); console.log(stepWidth, '行走倍数(步数) = box2宽 / mask宽 '); console.log(-stepWidth * mx, '可移动总距离 * 行走步数；表示遮罩层从一边走到另一边结束所用距离'); } })