本文详细解析了使用JavaScript实现图片放大镜效果的完整思路与代码。通过HTML构建小图、大图及放大镜容器结构，利用CSS控制布局与溢出隐藏，并结合JS监听鼠标移动事件，根据小图与大图的比例实时计算并移动大图位置，从而实现平滑的局部放大浏览体验。
本文分享了一个使用JavaScript实现图片放大镜效果的具体案例，供开发者参考学习。
最终实现的视觉效果如下所示：
实现该效果的核心思路如下：
首先准备两张尺寸存在整数倍关系的图片，分别作为缩略图（小图）和原图（大图）。
在缩略图上方覆盖一个代表放大镜区域的元素，将其背景设置为透明，以便透过该区域看到下方的大图。
在大图外层包裹一个父容器，设置该容器超出部分隐藏（overflow: hidden），其尺寸仅需容纳放大后的局部图像即可。父容器与放大镜区域的尺寸比例，应等于大图与小图的尺寸比例。
监听缩略图上的鼠标移动事件，获取鼠标在缩略图中的相对坐标。根据小图与大图的比例关系，计算出大图对应的移动坐标，并动态调整大图的位置，确保放大后的局部图像始终显示在父容器的可视范围内。
具体实现代码分为以下三个部分：
HTML结构部分
<div id="box">
<!-- toBig是放大镜元素 -->
<div id="toBig"></div>
<!-- 小图片 -->
<img src="img/05.jpg" id="smallImg" width="800px">
</div>
<div id="beBig">
<!-- 大图片,比例为1.5倍数 -->
<img src="img/05.jpg" id="bigImg" width="1200px">
</div>CSS样式部分
*{
margin: 0px;
padding: 0px;
}
#box{
position: relative;
float: left;
}
#toBig{
width: 80px;
height: 80px;
border: 1px solid gray;
background-color: transparent;
position: absolute;
}
#beBig{
float: left;
overflow: hidden;
border: 1px solid gray;
position: relative;
left: 40px;
top:325px ;
}
#bigImg{
position: absolute;
}JavaScript脚本部分
<script type="text/javascript">
//获取小图片,大图片,放大镜元素,大图片的父元素
var smallImg=document.querySelector("#smallImg");
var bigImg=document.querySelector("#bigImg");
var toBig=document.querySelector("#toBig");
var beBig=document.querySelector("#beBig");
/*在页面加载时就先计算出小图片与大图片的比例*/
var q=0;
window.onload=function(){
q=bigImg.offsetWidth/smallImg.offsetWidth;
//根据放大镜的宽高和比例计算要显示放大内容的大小
beBig.style.width = toBig.clientWidth * q +"px";
beBig.style.height = toBig.clientHeight * q +"px";
}
//获取放大镜元素的中心，保证鼠标在放大镜中心
var xCenter=toBig.clientWidth/2;
var yCenter=toBig.clientHeight/2;
//flag是一个标志,当鼠标按下时为true,可以进行移动
flag=false;
toBig.onmousedown = function(){
flag=true;
}
toBig.onmouseup = function(){
flag=false;
}
window.onmousemove=function(ev){
var ev = ev || window.event;
//flag为true时,放大镜元素被按下并可以进行拖动
if(flag){
//获取鼠标当前所在位置并计算除了元素自身外要移动的位置
var mouseX=ev.clientX,mouseY=ev.clientY;
var trueX=mouseX - xCenter;
//判断放大镜元素是否超出小图片范围
if(trueX < smallImg.offsetLeft){
trueX = smallImg.offsetLeft;
}
if(trueX > smallImg.clientWidth - toBig.offsetWidth){
trueX = smallImg.clientWidth - toBig.offsetWidth;
}
var trueY=mouseY - yCenter;
if(trueY <= smallImg.offsetTop){
trueY = smallImg.offsetTop;
}
if(trueY > smallImg.clientHeight - toBig.offsetHeight){
trueY = smallImg.clientHeight - toBig.offsetHeight;
}
//小图片移动
toBig.style.left = trueX + "px";
toBig.style.top = trueY + "px";
console.log(trueX,trueY);
// 大图片要移动的位置
bigImg.style.left =-(trueX * q) + "px";
bigImg.style.top =-(trueY * q) + "px";
}
}
</script>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。