在浏览某宝商品的时候，会有以下的动画，其实就是个放大镜的效果。当然，我们可以用原生的javascript实现这种效果。这里，我今天总结介绍下用jQuery插件etalage 实现这种效果。
放大镜效果.gif
准备工作
我们需要引进的库和插件有：
- etalage.css
- jquery-1.11.1.min.js 和 jquery.etalage.min.js
html中的相关布局
实现放大镜效果主要是由 ul 标签实现，ul 标签里面的 li 标签包含原图 img 标签和放大图 img 标签，需要注意的是：原图的类名必须是 etalage_thumb_image ，放大图的类名则必须是etalage_source_image
例如以下代码：
<ul id="imageContainer">
<li>
<!-- 原图 -->
<img class="etalage_thumb_image" src="../picture/1.jpg" alt="pic">
<!-- 放大图 -->
<img class="etalage_source_image" src="../picture/1.jpg" alt="pic">
</li>
<li>
<!-- 原图 -->
<img class="etalage_thumb_image" src="../picture/2.jpg" alt="pic">
<!-- 放大图 -->
<img class="etalage_source_image" src="../picture/2.jpg" alt="pic">
</li>
<li>
<!-- 原图 -->
<img class="etalage_thumb_image" src="../picture/3.jpg" alt="pic">
<!-- 放大图 -->
<img class="etalage_source_image" src="../picture/3.jpg" alt="pic">
</li>
<li>
<!-- 原图 -->
<img class="etalage_thumb_image" src="../picture/4.jpg" alt="pic">
<!-- 放大图 -->
<img class="etalage_source_image" src="../picture/4.jpg" alt="pic">
</li>
</ul>
js代码
实现这种效果很简单，就是直接调用 $().etalage({...}) 这个方法实现，这个方法的参数主要有：
- 小图的宽高
thumb_image_width: n
thumb_image_height: n - 大图的宽高
source_image_width: n
source_image_height: n - 放大区域的大小
zoom_area_width: n
zoom_area_height: n
放大区域的默认大小： width: 600px height: 400px（测试得到的。。） - 大图显示的位置 ---- 距离小图的 margin-left
zoom_area_distance: n - 设置缩略图的数量
small_thumbs: n - 设置没有被选择的缩略图的透明度
smallthumb_inactive_opacity: n - 缩略图的位置 ---- 相对于小图的上下左右
smallthumbs_position: 'bottom' - 自动轮播
autoplay: true / false - 淡入淡出效果
zoom_easing: true / false
代码如下：
<script>
$(function () {
$("#imageContainer").etalage({
// 小图的宽高
thumb_image_width: 300,
thumb_image_height: 300,
// 大图的宽高
source_image_width: 500,
source_image_height: 600,
// 放大区域的大小 默认： width: 600px height: 400px
zoom_area_width: 350,
zoom_area_height: 400,
// 大图显示的位置 距离小图的margin-left
zoom_area_distance: 10,
// 设置缩略图的数量
small_thumbs: 4,
// 设置没有被选择的缩略图的透明度
smallthumb_inactive_opacity: 0.5,
// 缩略图的位置 下
smallthumbs_position: 'bottom',
// 不自动轮播
autoplay: false,
// 淡入淡出效果
zoom_easing: true
})
})
</script>
效果如下：
效果.gif
