本文详细讲解如何利用原生JavaScript实现图片放大镜效果。通过HTML结构搭建、CSS定位控制以及JS事件监听，实现鼠标经过时显示黄色遮挡层与大图、遮挡层跟随鼠标移动以及大图反向移动的联动逻辑。教程涵盖坐标计算、边界限制及比例缩放算法，适合前端初学者学习DOM操作与事件处理。
引言与效果预览
在许多商品详情页中，用户常能看到图片放大查看的功能。本文将演示如何构建一个类似的放大镜样式。
首先展示最终实现的效果：
示例图片可能略显模糊，建议在实际开发中替换为更清晰的图片以便观察细节。
功能模块拆解
该案例可拆分为三个核心功能模块：
1. 鼠标滑过小图片容器时，黄色半透明遮挡层与大图片容器显示；鼠标离开时，这两个容器隐藏。2. 黄色遮挡层需跟随鼠标指针移动。3. 当黄色遮挡层移动时，大图片需同步进行反向移动，以实现放大查看效果。
以下是HTML主体结构代码：
HTML与CSS结构实现
<div class="product_intro clearfix">
<!-- 预览区域 -->
<div class="preview_wrap fl">
<div class="preview_img">
<img src="img/big5.jpg" class="smallImg">
<div class="mask">
</div>
<div class="big">
<img src="img/big5.jpg" class="bigImg">
</div>
</div>
</div>
</div>接下来是CSS样式部分。需注意大图片与小图片的显示与隐藏状态控制，以及绝对定位的应用，确保各元素层级关系正确。
.preview_wrap {
width: 400px;
height: 590px;
}
.preview_img {
position: relative;
height: 398px;
border: 1px solid #CCCCCC;
background-color: pink;text-align: center;
}
.preview_img .smallImg {
margin-top: 25%;
width: 200px;
}
.mask {
display: none;
position: absolute;
top: left: 0;
width: 300px;
height: 300px;
background-color: yellow;
opacity: .5;
border: 1px solid #CCCCCC;
cursor: move;
}
.big {
display: none;
position: absolute;
left: 410px;
top: 0;
width: 500px;
height: 500px;
z-index: 999;
border: 1px solid #ccc;
overflow: hidden;
}
.big img {
position: absolute;
top: 0;
left: 0;
}最后查看JavaScript实现部分：
若将JavaScript代码分离至独立文件，需确保在HTML中正确引入，例如使用<script src="" type="text/javascript"></script>标签。
同时，建议将JS代码包裹在window.addEventListener('load', function() {})中，确保页面所有资源加载完毕后再执行脚本，避免DOM元素未就绪导致的错误。
以下是具体的代码实现步骤与逻辑思路，代码中已添加相应注释：
1. 实现鼠标滑过小图片容器时，黄色遮挡层和大图片容器的显示与隐藏逻辑。2. 监听鼠标移动事件，使黄色遮挡层跟随鼠标位置移动。3. 注意坐标基准问题：遮挡层的坐标应相对于其父容器计算，而非直接获取鼠标在页面中的坐标。4. 首先计算鼠标在小图片容器内的相对坐标。5. 将该坐标值赋给遮挡层的left和top属性。假设容器高度为300px，则遮挡层最大移动范围受其尺寸限制（如150px边长）。6. 在小图片容器内监听鼠标移动事件，计算遮挡层的移动距离。7. 需限制遮挡层不超出小图片容器的边界。8. 大图片的移动距离计算公式为：遮挡层移动距离 × (大图片最大可移动距离 / 遮挡层最大可移动距离)。
JavaScript逻辑与坐标计算
// 整个案例可以分为三个功能模块
// 鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开隐藏2个盒子功能
// 黄色的遮挡层跟随鼠标功能。
// 移动黄色遮挡层，大图片跟随移动功能。
// 1.鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开隐藏2个盒子功能
// 就是显示与隐藏
// 当页面全部加载执行完毕后再执行js代码
window.addEventListener('load', function() {
var preview_img = document.querySelector('.preview_img');
var mask = document.querySelector('.mask');
var big = document.querySelector('.big');
//2.当我们鼠标经过 preview_img 就显示和隐藏mask遮挡层和 big 大盒子
preview_img.addEventListener('mouseover', function() {
mask.style.display = 'block';
big.style.display = 'block';
})
preview_img.addEventListener('mouseout', function() {
mask.style.display = 'none';
big.style.display = 'none';
})
// 黄色的遮挡层跟随鼠标功能。
// 把鼠标坐标给遮挡层不合适。因为遮当层坐标以父盒子为准。
// 首先是获得鼠标在盒子的坐标
// 之后把数值给遮挡层做为left和top值。
// 此时用到鼠标移动事件，但是还是在小图片盒子内移动。
// 2.鼠标移动的时候,让黄色的盒子跟着鼠标来走
preview_img.addEventListener('mousemove', function(e) {
//(1).先计算出鼠标在盒子里的坐标
// 先算出鼠标在页面中的坐标,减去盒子距离左侧的距离,就是鼠标在盒子里的坐标
// 但是这里要注意:
// 要看他有没有父元素,并且父元素有没有定位
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
// console.log(x,y)
//(2)盒子高度 300的一半 150
// (3)mask移动的距离
var maskX = x - mask.offsetWidth / 2;
var maskY = y - mask.offsetHeight / 2;
// (4)遮挡层不能超出小图片盒子范围
// 如果小于0,就把坐标设置为0
//遮挡层的最大一定距离,因为都是正方形,所以高也适用
var maskMax = preview_img.offsetWidth - mask.offsetWidth;
if (maskX <= 0) {
maskX = 0
//如果大于遮挡层最大的移动距离，就把坐标设置为最大的移动距离
//遮挡层的最大移动距离:小图片盒子宽度减去遮挡层盒子宽度
} else if (maskX >= maskMax) {
maskX = maskMax;
}
if (maskY <= 0) {
maskY = 0;
//如果大于遮挡层最大的移动距离，就把坐标设置为最大的移动距离
//遮挡层的最大移动距离:小图片盒子宽度减去遮挡层盒子宽度
} else if (maskY >= maskMax) {
maskY = maskMax;
}
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
// 移动黄色遮挡层, 大图片跟随移动功能
// 求大图片的移动距离公式:
// 遮挡层移动距离 / 遮挡层最大移动距离 = 大图片移动距离 / 大图片最大移动距离
// 3.大图片的移动距离=遮挡层移动距离*大图片最大移动距离/遮挡层的最大移动距离
var bigImg = document.querySelector('.bigImg'); //大图
//大图片最大移动距离
var bigMax = bigImg.offsetWidth - big.offsetWidth;
//大图片最大移动距离
var bigX = maskX * bigMax / maskMax;
var bigY = maskY * bigMax / maskMax;
bigImg.style.left = -bigX + 'px';
bigImg.style.top = -bigY + 'px';
})
})以上就是实现图片放大镜效果的完整内容，希望这对您的学习有所帮助，欢迎继续支持本站获取更多技术资源。