放大镜插件etalage的使用方法

准备工作
html中的相关布局

在浏览某宝商品的时候，会有以下的动画，其实就是个放大镜的效果。当然，我们可以用原生的javascript实现这种效果。这里，我今天总结介绍下用jQuery插件etalage 实现这种效果。

准备工作

我们需要引进的库和插件有：

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="example1">
    <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>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

调用参数的方法 
$('#example1').etalage({ 
thumb_image_width: 300,//缩略图的宽度 
thumb_image_height: 400,//缩略图的高度 
source_image_width: 900,//大图的宽度 
source_image_height: 1200,//大图的高度 
}); 
基本参数

调用参数的方法

$('#example1').etalage({

thumb_image_width: 300,//缩略图的宽度

thumb_image_height: 400,//缩略图的高度

source_image_width: 900,//大图的宽度

source_image_height: 1200,//大图的高度

});

基本参数

$('#example1').etalage({
        thumb_image_width: 300,//缩略图的宽度
        thumb_image_height: 400,//缩略图的高度
        source_image_width: 900,//大图的宽度
        source_image_height: 1200,//大图的高度
        align:"left",//缩略图区域在屏幕的位置(好像只能是左右)
        zoom_area_width: 600,//放大区域的宽度-使用：justify调整全行排满（只是行）
        zoom_area_height: 500,//放大区域的高度
        zoom_area_distance: 200,//放大区域距离缩略图的距离
        zoom_easing: false,//淡入淡出效果
        click_to_zoom: false,//点击一下才可以放大
        zoom_element: "auto",//
        show_descriptions: false,//是否在放大区域显示图片描述的文字
        description_location: "top",//图片描述的文字在放大区域的位置
        description_opacity: 1,//图片描述的文字在放大区域的透明度
        small_thumbs: 3,//缩略图的个数
        smallthumb_inactive_opacity: 0.7,//小缩略图未选中的透明度
        smallthumb_hide_single: true,//
        smallthumb_select_on_hover: false,//小缩略图反页效果用hover实现（而不是点击事件）
        smallthumbs_position: "top",//略缩图的位置，下左右没有上
        magnifier_opacity: 0.5,//选择放大区域的除了选中的区域的透明度
        magnifier_invert: true,//是否在选择区域的显示对比差
        show_icon: false,//
        icon_offset: 20,//
        hide_cursor: false,//是否隐藏鼠标箭头
        show_hint: true,//
        hint_offset: 15,//
        speed: 200,//鼠标在缩略图位置移动的速度在放大区域的延迟单位是：ms
        autoplay: true,//是否自动轮播，默认是true，也就是默认是自动
        autoplay_interval: 1000,//自动轮播的时间间隔
        keyboard: true,//
        right_to_left: false,//轮播的方向是否是从右到左
    });