如何利用原生JavaScript实现放大镜效果

发布时间：2023-03-17 11:09:29 所属栏目：教程来源：

导读：需求列表
鼠标进入盒子里面控制遮罩层和放大盒子显示与隐藏

遮罩层跟随鼠标移动且遮罩层不超出盒子限定范围内

图片盒子/遮罩层/放大盒子这三个的宽高大小均可适配

HTML
<div class="outer"
<!-- 图

需求列表
鼠标进入盒子里面控制遮罩层和放大盒子显示与隐藏

遮罩层跟随鼠标移动且遮罩层不超出盒子限定范围内

图片盒子/遮罩层/放大盒子这三个的宽高大小均可适配

HTML
<div class="outer"

<div class="Box">
<img src="./33.jpg" alt="">

<div class="mask"></div>
</div>

<div class="Box2"></div>
</div>
CSS
.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);
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;
}
Javascript
// 拿到三个盒子的元素
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) mx = 0
// 如果在 [盒子 - 遮罩的一半] 这个区间，才可以移动
if (x >= maskWidthHalf && x <= currentBoxWidth - maskWidthHalf) mx = x - maskWidthHalf
// 到达 [盒子 - 遮罩一半] 就不能再移动了
if (x > currentBoxWidth - maskWidthHalf) mx = currentBoxWidth - maskWidth

// 处理 y 部分（同理）
if (y < maskHeightHalf) my = 0
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, '可移动总距离 * 行走步数；表示遮罩层从一边走到另一边结束所用距离');
}
})
分析
1.背景被放大多少倍，取决于你当前盒子自身的宽度和遮罩层的宽度

假设当前是一个400宽的盒子，而遮罩层的宽度为200

那么放大盒子里面的图片就是 400 / 200 = 2倍，当前比例也就是 1：2

如果当前是一个600宽的盒子，而遮罩层的宽度为100

那么放大盒子里面的图片就是 600 / 100 = 6倍，当前比例也就是 1：6

2.行走的步数走多少步，取决于你放大盒子宽度和遮盖层宽度

假设当前放大盒子宽度是600，而遮罩层是100，这意味着，需要走6次，也就是6倍才能从头走到尾，如果Box1是200宽，那 mx 可移动距离是 100，这意味着100 * 6 = 600走完 600 路程才能让放大了6倍的背景图片完全显示出来。

3.存在上述理论：

即可做到 Box1/Box2/遮罩层这三个盒子可以任意改变大小，从而不影响缩放。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!