这是一款可以将举办图片放大缩小的jQuery插件。就像电影中的特效一样，画面可以一层层的放大深入，最后还可以一层层的缩小返回。

HTML

先来看一个简单的html结构。

<div id="zt-container" class="zt-container">
  <div class="zt-item" data-id="zt-item-1">
    <img class="zt-current" src="images/image1.jpg" />
    <div class="zt-tag" data-dir="1" data-link="zt-item-2" data-zoom="5" data-speed="700" data-delay="50" style="top:138px;left:151px;"></div>
    <div class="zt-tag" data-dir="1" data-link="zt-item-3" data-zoom="6" data-speed="700" data-delay="50" style="top:253px;left:520px;"></div>
  </div>
  <div class="zt-item" data-id="zt-item-2">
    <img class="zt-current" src="images/image1_1.jpg" />
    <div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-1" data-zoom="5" data-speed="500" data-delay="0"></div>
  </div>    
  <div class="zt-item" data-id="zt-item-3">
    <img class="zt-current" src="images/image2_2.jpg" />
    <div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-1" data-zoom="6" data-speed="500" data-delay="0"></div>
  </div>      
</div>

<img class="zt-current" src="images/imageX.jpg" />是每一步中使用的锚点小方块。它们有一些可用的属性标签如下：

  • data-dir：可选值为1或-1,1表示前进，-1表示后退。
  • data-link：链接到data-id指定的目标。
  • data-zoom：放大缩小因子。数值越小，图片放大缩小的倍数越小。
  • data-speed：缩放速度。单位为毫秒。
  • data-delay：缩放延时。

锚点位置使用css来定位。

可用参数

下面是默认的参数选项：

$('#zt-container').zoomtour({
  // if true the tags are rotated depending on their position
  rotation    : true,
  // zoom out animation easing. Example: easeOutBounce , easeOutBack  
  zoominEasing  : '',  
  // zoom out animation easing
  zoomoutEasing : ''  
});