js实现放大镜效果

在我们平时见到很多购物网站都会有放大镜效果的出现，当我们将鼠标放在一个商品图片的上面，就会在旁边出现对应的放大效果。

效果图

实现步骤

实现原理是非常简单的，实际上是两张图片，一张原图和一张更大尺寸的图片。一开始通过css样式的设置，将大的图片隐藏掉，只有将鼠标放到原图上才会将大图片显示出来。

<div class="main">
    <div class="div1">
        <img src="123.jpg">
        <!--放大镜的阴影部分-->
        <div class="div2"></div>
    </div>
    <div class="div3">
        <img src="123.jpg" id="big-img">
    </div>
</div>

css部分

整个div块设置了一个外边框100px，使得图片向右和向下挪动了100px。

 		*{
            margin: 0;
            padding: 0;
        }
        .main{
           margin: 100px;
        }

第一个div块样式设置