原生JavaScript实现图片放大镜效果详解
本文介绍如何利用原生JavaScript实现图片放大镜效果。通过监听鼠标移入移出事件控制遮罩与大图显示，结合鼠标坐标计算移动块位置，并依据比例映射大图偏移量，最终实现跟随鼠标的局部放大浏览功能。
初次撰写技术博客，心情颇为激动。目前本人在天津就读大学，未来职业规划倾向于前端开发领域。虽然学习周期尚短，但坚持记录学习历程与心得有助于巩固知识体系。本文分享的内容虽非高深理论，而是基础实践，但我会持续整理优质资源，确保内容易于理解。期待未来能产出更具深度的技术文章，以此自勉。
实现思路与背景
回归技术主题。此前在潭州教育视频中，讲师使用JQuery实现了放大镜功能，但因讲解节奏较慢且内容冗余，我是通过倍速观看完成的。鉴于目前对JQuery掌握尚浅，但具备基础代码阅读能力，我决定尝试使用纯JavaScript重新实现该功能，并最终成功达成预期效果。
核心逻辑如下：初始状态下，移动遮罩块（move）与大图容器（bimg）均处于隐藏状态。当鼠标进入主容器（box）区域时，触发显示这两个块。随后获取鼠标实时坐标，通过特定算法计算出move块和大图的对应位置与尺寸，从而完成放大镜的视觉呈现。关于move块和大图的具体坐标计算逻辑，下文将详细展开。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<link href="css/bigimg.css" rel="stylesheet" />
<script src="js/bigimg.js"></script>
</head>
<body onload="bigimg()">
<div id="box">
<img src="images/simg.jpg" alt="#">
<div id="move"></div>
<div id="bimg">
<img id="b_bimg" src="images/bimg.jpg" alt="#">
</div>
</div>
</body>
</html>CSS样式布局
CSS样式定义如下：
*{
margin:0px;
padding:0px;
}
#box{
width:430px;
height:430px;
margin:100px;
margin-left:17%;
position:relative;//这里使用相对定位，好让其他的元素能依靠这个元素定位
}
#move{
background-image:url(../images/move.png);
width:220px;
height:220px;
position:absolute;
left:0px;
top:0px;
display:none;//先让他隐藏，用js使其显示
}
#bimg{
width:430px;
height:430px;
overflow:hidden;
position:absolute;
top:0px;
left:450px;
display:none;//先让他隐藏，用js使其显示
}
#bimg img{
width:800px;
height:800px;
position:absolute;
top:0px;
left:0px;
}JavaScript核心逻辑
JavaScript逻辑实现如下：
function bigimg(){
var bbox = document.getElementById("box");
var bmove = document.getElementById("move");
var bbimg = document.getElementById("bimg");
var b_bimg = document.getElementById("b_bimg");
bbox.onmouseover = function(){//鼠标移动到box上显示大图片和选框
bbimg.style.display = "block";
bmove.style.display="block";
}
bbox.onmouseout = function(){//鼠标移开box不显示大图片和选框
bbimg.style.display = "none";
bmove.style.display="none";
}
bbox.onmousemove = function(e){//获取鼠标位置
var x = e.clientX;//鼠标相对于视口的位置
var y = e.clientY;
var t = bbox.offsetTop;//box相对于视口的位置
var l = bbox.offsetLeft;
var _left = x - l - bmove.offsetWidth/2;//计算move的位置
var _top = y - t -bmove.offsetHeight/2;
if(_top<=0)//滑到box的最顶部
_top = 0;
else if(_top>=bbox.offsetHeight-bmove.offsetHeight)//滑到box的最底部
_top = bbox.offsetHeight-bmove.offsetHeight ;
if(_left<=0)//滑到box的最左边
_left=0;
else if(_left>=bbox.offsetWidth-bmove.offsetWidth)//滑到box的最右边
_left=bbox.offsetWidth-bmove.offsetWidth ;
bmove.style.top = _top +"px";//设置move的位置
bmove.style.left = _left + "px";
var w = _left/(bbox.offsetWidth-bmove.offsetWidth);//计算移动的比例
var h = _top/(bbox.offsetHeight-bmove.offsetHeight);
var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;//计算大图的位置
var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w;
b_bimg.style.top = -b_bimg_top + "px";//设置大图的位置信息
b_bimg.style.left = -b_bimg_left + "px";
}
}最终运行效果如下图所示：
move块坐标计算详解
1、move块的坐标计算逻辑
黑色箭头指示：
var x = e.clientX;//鼠标相对于视口的位置
var y = e.clientY;红色箭头指示：
var t = bbox.offsetTop;//box相对于视口的位置
var l = bbox.offsetLeft;橙色箭头指示：
var _left = x - l - bmove.offsetWidth/2;//计算move的位置
var _top = y - t -bmove.offsetHeight/2;bimg块坐标计算详解
2、bimg块（大图）的坐标计算逻辑
核心思路：利用move块在允许移动范围内的位移比例，来同步设定大图在容器内的偏移位置。
move块的有效移动范围：
bbox.offsetWidth-bmove.offsetWidthmove块当前坐标占有效移动范围的比例：
var w = _left/(bbox.offsetWidth-bmove.offsetWidth);//计算移动的比例
var h = _top/(bbox.offsetHeight-bmove.offsetHeight);bimg块（大图）的有效移动范围：
b_bimg.offsetHeight-bbimg.offsetHeightbimg块（大图）的最终位置：
var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;//计算大图的位置
var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w;以上即为使用JavaScript实现放大镜效果的完整实例，希望能为读者提供有价值的参考，欢迎交流指正。
JavaScript怎么准确判断数据类型：typeof、instanceof与Object.prototype.toString
2026-11-05 17:09:21
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么？
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36
D3.js 与 ECharts 选型对比：灵活性 vs 开发效率
2026-11-05 09:45:01