91 案例——图片放大特效

在网站中，经常可以看到商品详情页中，鼠标经过商品的图片即可看到一个放大查看区域的细节图片。那么，图片放大特效是如何实现的?
通常，会准备两张相同的图片，一张是小图显示在商品的展示区域，另一张大图用于鼠标在小图上移动时，按比例显示大图中的对应区域。

需求：鼠标经过盒子 显示遮罩和大图 鼠标移动的时候 让遮罩跟着移动让大图按照比例移动

1、HTML页面

展示小图、隐藏鼠标的遮罩及大图。

2、显示与隐藏“遮罩”和“局部放大图”

当鼠标在小图上移动时，显示鼠标的遮罩和大图。当鼠标移出时，隐藏鼠标的遮罩和大图。

3、遮罩的移动

当鼠标移动时，让遮罩跟着在小图中进行移动。

4、限定遮罩的移动范围

限定遮罩在小图中的可移动范围。

5、按照比例移动大图

根据遮罩在小图中的覆盖范围，按比例显示大图。