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
例如以下代码：

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
  代码如下：

效果如下：

效果.gif