js 放大镜效果

前言：

        本人纯小白一个，有很多地方理解的没有各位大牛那么透彻，如有错误，请各位大牛指出斧正！小弟感激不尽。

        本篇文章为您分析一下原生JS写淘宝放大镜效果

基本功能：

• 运用比例来控制移动放大镜从而选择需要放大的区域。

• 可以根据用户配置来调整放大镜尺寸。

需求分析

准备两张图片一张小图，一张大图（比例请参考京东或者淘宝页面上的放大镜）

一开始页面需要有三个div结构。

    <div class="small">    <!--小图-->
        <div class="move" style="height: 150px; width:150px"></div><!--可以移动的区域-->
    </div>
    <div class="big"></div><!--要显示的大图-->

<div class="move" style="height: 150px; width:150px"></div>

#### css样式

    <div class="small">
        <div class="move"></div>
    </div>
    <div class="big"></div>