图片局部放大原生js，html代码

最新推荐文章于 2025-06-17 10:07:57 发布

天步

最新推荐文章于 2025-06-17 10:07:57 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 脚本文章标签： javascript 前端图片标签鼠标

本文链接：https://blog.youkuaiyun.com/sn_qmzm521/article/details/70239922

JS 同时被 2 个专栏收录

32 篇文章

订阅专栏

脚本

31 篇文章

订阅专栏

本文介绍了一种通过JavaScript实现的图片放大镜效果。利用小图和大图展示同一张图片的不同区域，通过鼠标移动采集坐标并调整大图位置，使用户能够查看图片细节。文章提供了完整的HTML和JavaScript代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码主要是3部分，JS部分，小图部分，大图部分。实现原理：小图和大图是用的同一张图片，为了清晰效果，图片要足够大，大图父标签是一个DIV，溢出隐藏属性，鼠标进入小图就采集坐标，改变大图的上左边距来把同坐标的部分移入到父div中，因为父div比大图小，溢出隐藏可见部分，呈现在页面的就是图片的一部分并且是大图没缩小过。

图片路径引用自己的图片即可。

代码部分：

<html>
<head>
<style>
#min_div{ width:167px;height:113px;position: relative; top:0px; left:0px; overflow:hidden; cursor:move;}
#min_div #min_img{ width:167px; height:113px;}
#min_div #min_img_t{ position: absolute;z-index:1;display:none;}
#max_div{ position: absolute; top: 200px; left:20px; width:500px; height:370px; overflow:hidden; display:none;}
#max_div #max_img{ width:835px; height:565px;}
</style>
</head>
<body>
<script>
function likai(){
document.getElementById("max_div").style.display="none";
document.getElementById("min_img_t").style.display="none";
}
function getMousePos(event) {
document.getElementById("max_div").style.display="block";
document.getElementById("min_img_t").style.display="block";
var e = event || window.event;
var scrollX = document.documentElement.offsetLeft || document.body.offsetLeft;
var scrollY = document.documentElement.offsetTop || document.body.offsetTop;
var x = e.pageX || e.clientX + scrollX;
var y = e.pageY || e.clientY + scrollY;
//alert('x: ' + x + '\ny: ' + y);
return { 'x': x, 'y': y };
//console.log
}

function test(e){
var jj=getMousePos(e).x-document.getElementById("min_div").offsetLeft-50;
var gg=getMousePos(e).y-document.getElementById("min_div").offsetTop-37;
if(jj<0){jj=0;}else{if(jj>67){jj=67;}}
if(gg<0){gg=0;}else{if(gg>38){gg=38;}}
document.getElementById("min_img_t").style.marginLeft=jj+"px"
document.getElementById("min_img_t").style.marginTop=gg+"px"
document.getElementById("max_img").style.marginLeft=-jj*5+"px"
document.getElementById("max_img").style.marginTop=-gg*5+"px"
};
</script>
<div id="min_div" onmousemove="test(event)" onmouseout="likai()">
<img id="min_img_t" src="min_img_t.png">
<img src="timg.jpg" alt="{$product[title]}" width="167" height="113" id="test_img" id="min_img"/>
</div>

<div id="max_div">
<img id="max_img" src="timg.jpg" />
</div>

</body>
</html>