JavaScript实现简单放大镜效果详解
本文详细介绍如何使用JavaScript实现网页中的简单放大镜效果。通过监听鼠标进入、离开及移动事件，动态控制浮动小盒子的位置与显示区域的内容同步缩放。文章涵盖核心逻辑、边界判断公式及完整HTML/CSS/JS代码示例，帮助开发者快速掌握图片局部放大功能的实现原理。
本文分享了一段使用JavaScript实现简单放大镜效果的具体代码，供读者参考学习。
效果
当鼠标在原图片上移动时，会出现一个黄色小盒子跟随鼠标移动。该黄色小盒子覆盖的区域内容，会在右侧的显示区中以放大的形式呈现。
具体效果如下图所示：
核心思路
1. 当鼠标悬停在图片上时，右侧显示区出现；当鼠标离开小盒子区域时，显示区隐藏。
2. 鼠标在图片上移动时，黄色小盒子需跟随鼠标移动，且鼠标指针应始终位于黄色小盒子的中心位置。
3. 需对黄色小盒子的移动范围进行限制，确保其不会超出原图片的边界。
4. 黄色小盒子在原图片上移动的距离，需按相同比例映射到显示区，使显示区内容同步移动。
5. 当显示区尺寸发生变化，或显示区内的图片内容大小改变时，原图片上的黄色小盒子大小需随之动态调整。
操作
1. 首先获取页面中所需的相关DOM元素。
// 获取页面上我们需要的元素
var box1=document.querySelector('.box1')
var yellow=document.querySelector('.yellow')
var box2=document.querySelector('#rightbox')
var screen=rightbox.children[0]2. 实现鼠标悬停在图片上时显示区域，鼠标离开时隐藏区域的逻辑。
// 鼠标进入和离开图片
box1.onmouseenter=function(){
box2.style.display='block'
}
box1.onmouseleave=function(){
box2.style.display='none'
}利用鼠标的mouseenter（进入）和mouseleave（离开）事件即可实现，分别控制显示区的显示与隐藏状态。
3. 实现鼠标移动时，黄色小盒子跟随移动，并保持鼠标在小盒子中心。
box1.onmousemove=function(e){
// 算出小盒子在图片时，自身的中心点
var x=e.pageX-box1.offsetLeft-yellow.offsetWidth/2
var y=e.pageY-box1.offsetTop-yellow.offsetHeight/2
// 给黄色小盒子赋值，让黄色小盒子跟随鼠标移动
yellow.style.left=x+'px'
yellow.style.top=y+'px'
}1. 使用mousemove事件，鼠标在图片上每移动一点即触发一次，确保实时刷新位置。
2. 计算小盒子在图片上的中心点坐标。
计算公式为：（鼠标在页面中的坐标值，减去图片的偏移距离，再减去小盒子自身宽度或高度的一半）。
此处减去一半是为了保证鼠标指针始终位于黄色小盒子的几何中心。
4. 为黄色小盒子添加边界判断条件，防止其超出图片区域。
// 鼠标在图片上移动触发事件
box1.onmousemove=function(e){
// 算出小盒子在图片的中心点
var x=e.pageX-box1.offsetLeft-yellow.offsetWidth/2
var y=e.pageY-box1.offsetTop-yellow.offsetHeight/2
// --------------------------------------------------------------------------------
// 新增部分
// 判断小盒子是否超出img范围，使黄色小盒子不能超出img范围
if(x<0){
// 此时的0不是图片的左侧，而是小盒子在最左边时，小盒子的中心点
x=0
}else if(x>box1.offsetWidth-yellow.offsetWidth){
// 小盒子的X轴中心点大于图片盒子的宽度减去自身宽度时，说明超出，则始终等于图片盒子的宽度减去自身宽度
x=box1.offsetWidth-yellow.offsetWidth
}
// 同上
if(y<0){
y=0
}else if(y>box1.offsetHeight-yellow.offsetHeight){
y=box1.offsetHeight-yellow.offsetHeight
}
// ---------------------------------------------------------------------------------
// 给黄色小盒子赋值，让黄色小盒子跟随鼠标移动
yellow.style.left=x+'px'
yellow.style.top=y+'px'1. 判断小盒子左侧是否超出图片范围，使用if(x<0)进行判断。注意此时的0是相对于小盒子中心点计算的。
2. 判断右侧边界：x > box1.offsetWidth - yellow.offsetWidth。
即判断小盒子中心点横坐标是否大于（图片区域宽度减去小盒子宽度）。
判定依据是小盒子宽度，参考点为小盒子中心点，坐标0对应小盒子中心，因已减去小盒子宽度的一半，故右侧边界需减去小盒子宽度的一半乘以2
3. 上下方向的判断逻辑相同，这样黄色小盒子就不会超出图片区域。
5. 黄色小盒子在图片上移动多少距离，显示区域需按同比例移动。
// 通过计算，得出小盒子在图片移动多少，显示区就移动多少的比例
srceen.style.left=-x/box1.offsetWidth*srceen.offsetWidth+'px'
srceen.style.top=-y/box1.offsetHeight*srceen.offsetHeight+'px'显示区域移动的距离取决于小盒子移动的距离。
计算公式为：小盒子移动的值除以图片宽度，再乘以显示区域的宽度。
这样计算出的显示区域移动值，就能与小盒子在图片上的移动保持相同的比例。
6. 当显示区大小改变或显示区内容变化时，图片上的黄色小盒子大小随之改变。
// 计算黄色小盒子在图片上的大小
yellow.style.width=box1.offsetWidth/(srceen.offsetWidth/box2.offsetWidth)+'px'
yellow.style.height=box1.offsetHeight/(srceen.offsetHeight/box2.offsetHeight)+'px'
}计算方法为：黄色盒子的宽度 = 图片宽度 / (显示区域内容宽度 / 显示区域框的宽度)。
高度的计算方式同理。
由于该计算是在鼠标移动事件中触发的，因此可以实现实时刷新。
调整
.img2{
width: 3000px;
height: 3000px;
position: absolute;
}
#rightbox{
position: absolute;
top: 0;
left: 650px;
width: 900px;
height: 900px;
overflow: hidden;
display: none;
}当需要调整框的大小或放大比例时，只需修改相关CSS样式的宽高属性即可。
内容、CSS、JS整体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.img1{
width: 300px;
height: 300px;
}
.img2{
width: 3000px;
height: 3000px;
position: absolute;
}
#rightbox{
position: absolute;
top: 0;
left: 650px;
width: 900px;
height: 900px;
overflow: hidden;
display: none;
}
.yellow{
background-color: yellow;
opacity: 0.5;
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
}
.box1{
width: 300px;
height: 300px;
position: relative;
margin-left: 300PX;
}
</style>
</head>
<body>
<div class="box1">
<img src="./images/1.jpg" alt="" class="img1">
<div class="yellow"></div>
</div>
<div id="rightbox">
<img src="./images/1.jpg" alt="" class="img2">
</div>
<script>
// 获取页面上我们需要的元素
var box1=document.querySelector('.box1')
var yellow=document.querySelector('.yellow')
var box2=document.querySelector('#rightbox')
var srceen=rightbox.children[0]
// 鼠标进入和离开图片
box1.onmouseenter=function(){
box2.style.display='block'
}
box1.onmouseleave=function(){
box2.style.display='none'
}
// 鼠标在图片上移动触发事件
box1.onmousemove=function(e){
// 算出小盒子在图片的中心点
var x=e.pageX-box1.offsetLeft-yellow.offsetWidth/2
var y=e.pageY-box1.offsetTop-yellow.offsetHeight/2
// 判断小盒子是否超出img范围，使黄色小盒子不能超出img范围
if(x<0){
// 此时的0不是图片的左侧，而是小盒子在最左边时，小盒子的中心点
x=0
}else if(x>box1.offsetWidth-yellow.offsetWidth){
// 小盒子的X轴中心点大于图片盒子的宽度减去自身宽度时，说明超出，则始终等于图片盒子的宽度减去自身宽度
x=box1.offsetWidth-yellow.offsetWidth
}
// 同上
if(y<0){
y=0
}else if(y>box1.offsetHeight-yellow.offsetHeight){
y=box1.offsetHeight-yellow.offsetHeight
}
// 给黄色小盒子赋值，让黄色小盒子跟随鼠标移动
yellow.style.left=x+'px'
yellow.style.top=y+'px'
// 通过计算，得出小盒子在图片移动多少，显示区就移动多少的比例
srceen.style.left=-x/box1.offsetWidth*srceen.offsetWidth+'px'
srceen.style.top=-y/box1.offsetHeight*srceen.offsetHeight+'px'
// 计算黄色小盒子在图片上的大小
yellow.style.width=box1.offsetWidth/(srceen.offsetWidth/box2.offsetWidth)+'px'
yellow.style.height=box1.offsetHeight/(srceen.offsetHeight/box2.offsetHeight)+'px'
}
</script>
</body>
</html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
JavaScript闭包与类(Class)的区别及适用场景对比
2026-11-05 15:48:57
JavaScript入门要学ES6吗？let与箭头函数等新特性解析
2026-11-05 14:49:16
JavaScript 8种数据类型详解：基本类型与引用类型的区别
2026-11-05 14:25:15
怎么在JavaScript中使用async/await优化Ajax异步流程
2026-11-05 13:56:15
JavaScript replace回调函数实现动态正则替换逻辑
2026-11-05 13:52:13