easy-zoom 放大镜插件的使用

在做唯品会项目的时候涉及到了商品图片放大的问题，简单的使用方法如下：

---

在项目中加上以下三部分的代码:
(1)JavaScript 代码：

 <script>
    var $easyzoom = $('.easyzoom').easyZoom();
     // Get the instance API
    var api = $easyzoom.data('easyZoom');
</script>

CSS代码：

<style>
        /* Shrink wrap strategy 1 */
        .easyzoom {
            float: left;
        }
        .easyzoom img {
            display: block;
        }
        /* Shrink wrap strategy 2 */
        .easyzoom {
            display: inline-block;
        }
        .easyzoom img {
            vertical-align: bottom;
        }
    </style>

除此之外还要在 head 部分链接上 easy-zoom源文件中的CSS表 easyzoom.css
即：

<link rel="stylesheet" href="path/easyzoom.css" />

最后在需要放大镜效果的位置上加上如下代码：

<div class="easyzoom easyzoom--overlay is-ready">
    <a href="../Picture/good-detail-img-larger.jpg">
        <img src="../Picture/good-detail-img.jpg" style="width:420px;" alt="" />
    </a>
</div>

这里值得注意的是 img标签中的内容是这个div所呈现出来的内容，而当鼠标移到这个div区域上时，a标签中的 大图片(尺寸比img中的要大)就会覆盖地显示出来，虽然这是两个不同尺寸的图片，但是看起来仿佛将一张图片放大了一样。

---

easy-zoom插件源文件 : Click-me