效果图如下：
下面是html、css、js整合在一起的代码：
<!doctype html><html><head><meta charset="utf-8"><title>Document</title></head><style>.middle{width: 400px;height: 400px;border:1px solid #000;position:relative;}.middle>img{width: 400px;height: 400px;}.small{width: 400px; height: 100px;display: flex;justify-content: flex-start;align-items: center;}.small img{border:1px solid #0f0;width: 50px;height: 50px;margin:0 5px;}.small img.active{border-color:red;}.shade{width: 100px;height: 100px;background:rgba(255,255,0,0.5);position:absolute;left: 0;top: 0;display:none;}.big{width: 400px;height: 400px;position: absolute;left:105%;top: 0;overflow:hidden;display:none;}.big>img{width: 1600px;height: 1600px;position:absolute;left: 0;top: 0;}.box{margin:50px;}.shade:hover{cursor:move;}</style><body><div class="box"><div class="middle"><img src="/imgextra/i1/2632882314/O1CN01swAqbO1Sxr0a8xk6t_!!2632882314.jpg"><div class="shade"></div><div class="big"><img src="/imgextra/i1/2632882314/O1CN01swAqbO1Sxr0a8xk6t_!!2632882314.jpg"></div></div><div class="small"><img src="/imgextra/i1/2632882314/O1CN01swAqbO1Sxr0a8xk6t_!!2632882314.jpg" alt="" class="active"><img src="/imgextra/i2/2632882314/O1CN01Z1ew3B1Sxr0ZdsVQy_!!2632882314.jpg" alt=""></div></div></body><script type="text/javascript">function Enlarge(){// 获取元素this.box = document.querySelector(".box");this.middle = this.box.querySelector(".middle");this.middleImg = this.box.querySelector(".middle>img");this.shade = this.box.querySelector(".shade");this.big = this.box.querySelector(".big");this.bigImg = this.box.querySelector(".big>img");this.smallImgs = this.box.querySelectorAll(".small>img");var _this = this;// 鼠标移入显示遮罩和大图this.middle.onmouseover = ()=>{this.over();}this.middle.onmouseout = ()=>{this.out();}// 小图移入事件for(var i=0;i<this.smallImgs.length;i++){this.smallImgs[i].onmouseover=function(){_this.mouseover(this);}}}// 小图的移入事件Enlarge.prototype.mouseover = function(ele){for(var i=0;i<this.smallImgs.length;i++){this.smallImgs[i].className = '';}ele.className = "active"// 移入小图换中图和大图this.middleImg.src = this.bigImg.src = ele.src}Enlarge.prototype.over = function(){this.shade.style.display = this.big.style.display = "block";// 中等盒子的移动事件this.middle.onmousemove= e=>{// 拖拽 - 获取光标位置var e = e || window.event;var x = e.pageX;var y = e.pageY;var l = x - this.box.offsetLeft - this.shade.clientWidth/2;if(l<=0){l = 0;}if(l>=this.middle.clientWidth - this.shade.clientWidth){l=this.middle.clientWidth - this.shade.clientWidth}this.shade.style.left = l + "px"var t = y - this.box.offsetTop - this.shade.clientHeight/2;if(t<=0){t = 0;}if(t>=this.middle.clientHeight - this.shade.clientHeight){t=this.middle.clientHeight - this.shade.clientHeight}this.shade.style.top = t + "px"// 计算比例var percentX = this.shade.offsetLeft/this.middle.clientWidth;var percentY = this.shade.offsetTop/this.middle.clientHeight;// 根据比例计算大图应该定位的值var bigX = this.bigImg.clientWidth * percentX;var bigY = this.bigImg.clientHeight * percentY;// 将值设置给大图的定位this.bigImg.style.left = -bigX + "px";this.bigImg.style.top = -bigY + "px";}}Enlarge.prototype.out = function(){this.shade.style.display = this.big.style.display = "none"}var enlarge = new Enlarge();</script></html>
对结构、布局、效果进行分析：
一、结构分析：
1.一个大盒子把大中小图的div都包起来div-box
2.一个放中等图片的盒子-div.middle
3.中等盒子里面包括一个透明遮罩 div.shade
4.一个放小图片的盒子-div.small
5.一个放大图的盒子-div.big
二、布局分析：
1.大盒子box设置相对定位
2.中等盒子middle设置相对定位
3.遮罩shade设置绝对定位在中等盒子中，隐藏
4.放大图的盒子big设置绝对定位，定位到大盒子box的右边，大图作为放大图的盒子的背景
三、效果分析：
1.鼠标移入小图，大图和中图随着小图更换，且小图的边框颜色会变
2.鼠标移入中图，遮罩和大图出现，且遮罩移动的过程中，大图显示的图片也随着遮罩在中图上的位置相应改变
3.鼠标离开中图，遮罩放大图隐藏
实现放大镜效果的注意事项：
var e = e || window.event;var x = e.pageX;var y = e.pageY;
这边获取光标位置用的page，而不是client。因为通常网站中，商品详情页上方会有导航、顶部等内容，会有滚动条的出现，而当滚动条滚动后，如果用的是client获取的光标位置，还需要加上滚动条滚动过的距离。
// 计算比例var percentX = this.shade.offsetLeft/this.middle.clientWidth;var percentY = this.shade.offsetTop/this.middle.clientHeight;// 根据比例计算大图应该定位的值var bigX = this.bigImg.clientWidth * percentX;var bigY = this.bigImg.clientHeight * percentY;// 将值设置给大图的定位this.bigImg.style.left = -bigX + "px";this.bigImg.style.top = -bigY + "px";
大图和遮罩的移动方向相反，所以赋值的时候得加上减号。
var l = x - this.box.offsetLeft - this.shade.clientWidth/2;if(l<=0){l = 0;}if(l>=this.middle.clientWidth - this.shade.clientWidth){l=this.middle.clientWidth - this.shade.clientWidth}this.shade.style.left = l + "px"var t = y - this.box.offsetTop - this.shade.clientHeight/2;if(t<=0){t = 0;}if(t>=this.middle.clientHeight - this.shade.clientHeight){t=this.middle.clientHeight - this.shade.clientHeight}this.shade.style.top = t + "px"
遮罩位置计算思路如下图：
