jQuery 如何实现放大器效果

我又来了

今天的内容时如何实现放大器效果

我们在看网购的时候，每个商品都有详细的介绍图片

当我们把鼠标放上去的时候，会出现两个区域

一个区域是选中图片的具体位置

另一个区域是高清大图

需要注意的是，图片尽量为正方形
例

==原理==其实很简单：原图上的遮罩层默认隐藏，将原图放大，并默认隐藏，原图默认显示，当鼠标进入原图时，将大图显示在一个区域内，并显示遮罩层。

查看html代码
查看CSS代码
查看JavaSript代码

首先，写入html代码

<div class="box1">
        <img src="img/02.jpg" alt="">
        <div class="shadow"></div>
    </div>

    <div class="box2">
        <img id="img" src=