京东等电商网站中可以对商品进行放大观察，本文要实现的就是模仿这个放大镜功能，大致效果如下图所示:
简要说明实现思路：
1.原图窗口与放大窗口插入的是同一个图片，不过原图窗口的图片要适当缩小，放大窗口图片保持原大小，超出部分设置隐藏
2.先定下放大比例，例如本文原图大小为1000*1000，可以把原图窗口的图片设为400*400，这样放大窗口就能实现2.5倍的放大效果了（两个窗口的大小是一样的！！都是400*400）
3.首先实现小框框跟着鼠标移动的功能（本文设置鼠标总是在小框框的中心位置）
4.再实现放大窗口中的图片随着小框框的移动实现自身移动
5.鼠标(小框框)向右移动，放大窗口中的图片是要向左移动的！他们的方向总是相反
6.小框框大小不是随意设置，与放大倍数有关，本文放大2.5倍，则原图窗口应该也是小框框大小的2.5倍，即小框框大小160*160
具体代码如下：
---------------------
作者：metoo9527
来源：CSDN
原文：https://blog.csdn.net/metoo9527/article/details/79100080
版权声明：本文为博主原创文章，转载请附上博文链接！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易放大镜的实现</title>
<style>
body,ul,li{padding: 0;margin: 0;list-style: none;}
.orig,.fd{
400px;
height: 400px;
border:1px solid red;
position: absolute;
}
.fd{
left:410px;
top:0;
overflow: hidden;
display: none;
}
.blocks{
/*小图的宽高比例
窗口的宽度 / 大图的宽度 * 窗口的宽度
*/
160px;
height:160px;
background:rgba(254,238,167,.4);
position: absolute;
left: 0;
top:0;
display: none;
}
</style>
</head>
<body>
<!-- 建立显示原图窗口 -->
<div class="orig">
<!-- 插入要放大的图片 -->
<img src="./images/3.jpg" alt="" width="400">
<!-- 加入用于锁定放大区域的小框框 -->
<div class="blocks"></div>
</div>
<!-- 建立显示放大图片的窗口 -->
<div class="fd"><img src="./images/3.jpg" alt="" style="position: absolute;">
</div>
<script src="./jquery-1.8.3.min.js"></script>
<script>
// 绑定鼠标移入原图窗口事件
$('.orig').mouseover(function(e){
$('.fd').css('display','block');
$('.blocks').css('display','block');
})
//绑定鼠标在原图窗口移动的事件
$('.orig').mousemove(function(e){
// 获取鼠标当前的位置
var x=e.clientX;
var y=e.clientY;
// 获取原图窗口距离文档的偏移位置
var sX=$('.orig').offset().left;
var sY=$('.orig').offset().top;
// 计算鼠标的相对位置（相对于原图窗口的偏移距离）
var mx=x-sX;
var my=y-sY;
// 获取小框框的宽高
var mw=$('.blocks').width()/2;
var mh=$('.blocks').height()/2;
// 鼠标移动后小框框的移动距离
$('.blocks').css({left:mx-mw+'px',top:my-mh+'px'});
// 获取小框框的偏移位置
var lw=$('.blocks').position().left;
var lh=$('.blocks').position().top;
// 判断边界（小框框只能在原图窗口范围内移动）
var maxW=$('.orig').width()-$('.blocks').width()
var maxH=$('.orig').height()-$('.blocks').height()
// 左边界
if(lw<=0){$('.blocks').css('left','0px');}
// 右边界
if(lw>=maxW){
$('.blocks').css('left',maxW+'px');
}
// 上边界
if(lh<=0){$('.blocks').css('top','0px');}
// 下边界
if(lh>=maxH){
$('.blocks').css('top',maxH+'px');
}
// 获取小框框的偏移位置
var lw=$('.blocks').position().left;
var lh=$('.blocks').position().top;
// 计算鼠标在小图里的位置 *2.5计算大图移动的比例
var newX=lw*2.5;
var newY=lh*2.5;
$('.fd img').css({left:-newX+'px',top:-newY+'px'});
})
//绑定鼠标离开原图窗口事件
$('.orig').mouseout(function(){
$('.fd').css('display','none');
$('.blocks').css('display','none');
})
</script>
</body>
</html>