etalage插件使用

在浏览某宝商品的时候，会有以下的动画，其实就是个放大镜的效果。当然，我们可以用原生的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