09/12
2015
之前我用过jqzoom这个插件做图片放大镜效果，今天看萌の里这个网站，发现它的图片放大镜挺好的，于是看了下源代码，看到它使用的是一个名为elevateZoom的插件。然后我也去百度了下用用，感觉良好。用这个比用jqzoom更快捷更有效率。如果你使用jqzoom，你需要引入它的css文件，还要注意它用来做鼠标指针的那张图片的路径是否正确。而elevateZoom只需要你引用它自身的js文件就够了。
做了一个demo，代码如下：
<script src="https://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
<script src="/f/jquery.elevateZoom-3.0.8.min.js"></script>
<img id="zoom_img" src="/f/saber美图125_s.jpg" alt="" data-zoom-image="/f/saber%E7%BE%8E%E5%9B%BE125.jpg">
<script>
$(function () {
$('#zoom_img').elevateZoom({
scrollZoom: true,//允许滚动控制
easing: true//允许动画效果
zoomWindowWidth:550,//放大镜窗口宽度
zoomWindowHeight:400//放大镜窗口高度
});
});
</script>
首先引入jq和elevateZoom的js文件，然后给图片设置data-zoom-image属性，指示大图url。最后绑定一下事件就行了。如果要用在多个图片上的话，一个个绑定就行了。是不是很简单呢？
关于elevateZoom的参数，可以参考这里。
网上关于elevateZoom的信息比较少，官网在此，注意，你也许需要翻墙。再注意，官网上给出的代码都是驴唇不对马嘴的，请你自己查看源代码，找到真正使用的代码——而不是直接在页面上显示出来的代码。
如果想要做个如下的电商网站的展示效果：
首先，你需要添加缩略图部分，并设置一些属性。完成后的html如下所示：
<!--先给中图指定参数--> <img id="zoom_img" src="中图url" alt="" data-zoom-image="大图url"> <!--然后是缩略图区域，记得设置id和a标签的属性--> <div id="galleryId"> <a class="" data-image="中图url" data-zoom-image="大图url"> <img src="缩略图url" alt=""> </a> <a class="" data-image="中图url" data-zoom-image="大图url"> <img src="缩略图url" alt=""> </a> <a class="" data-image="中图url" data-zoom-image="大图url"> <img src="缩略图url" alt=""> </a> </div>
css请自行添加。然后在绑定elevateZoom时的参数里添加缩略图容器的id，完成后的绑定代码如下：
$("#zoom_img").elevateZoom({ //在中图id上绑定
gallery:'galleryId', //缩略图列表容器的id
cursor: 'pointer', //鼠标指针
imageCrossfade: true //中图切换时显示过渡效果
});
这样就ok了。
上例中，点击中图时会弹出灯箱，播放所有大图。这里面用到了一个灯箱插件，并且在js里获取了一些由elevateZoom提供的信息，详情请查看demo。
