5分钟实现类似淘宝产品细节放大年夜功能

在网页中，对一件产品图做局部放大功能对付电商类网站还算比较常见，由于网页中的位置有限，不可能有足够大的地方将这张产品图放大，因此局部放大功能成为了一种较好的办理方案。

思路剖析：

如上图所示，在网页中加入两个容器，容器1放置原图，容器1中的3为须要显示放大的区域，容器2显示的是容器1中3所包裹的区域的放大图，容器1中的3在鼠标未进入容器1之前是隐蔽的，此时容器2也是不可见的。
当鼠标进入容器1时，3与容器2显示，3的中央点便是鼠标的位置，鼠标移动容器3也随着移动，那么与之对应的容器2中的放大区域也会随之变革，这里有一个先决条件即是容器3与容器2是成比例的关系，容器2中实在是存放已经做整体放大的一张图片，为了显示是局部放大，须要将超出容器2大小的部分隐蔽掉（即在容器2上设置overflow:hidden），那么在视图上显示的便是放大图片的一部分，从而实现局部放大效果。
鼠标移动时获取鼠标位置坐标，从而将这个坐标浸染于3的位置，进而去改变容器2中的图片位置。

赤色部分为容器3的中央点能到达的区域，不能超过此区域

参考代码：

内容部分：

样式部分：

JS部分：

把稳：上面的代码还有很多细节没有完成，比如居中显示，为什么获取到3的宽高只用宽去更换详细数字而高却没有更换、为什么在容器3中要嵌套2个<div>元素才能去实现这个功能、以及为什么须要在容器1上再去覆盖一个<div>去实现，希望各位小伙伴带着这些问题去改变个中的方法，不能只看一下，希望自己动手去敲一下代码，你就会创造个中的缘故原由（可以先提示一下，多个<div>元素嵌套会涉及到冒泡和捕获）；

实际效果：

对前端感兴趣的小伙伴记得关注小编，每天都会更新前真个一些小技巧。
没点赞的小伙伴记得点赞收藏哦，感激大家！