jQuery局部图片放大缩小效果

当前位置：主页 > jQuery库 > 图片效果 > jQuery局部图片放大缩小效果
阿里云
jQuery局部图片放大缩小效果
分享：

    插件介绍

    这是一款jQuery局部图片放大缩小效果的插件。图片上有几个锚点，点击可以将锚点附近的景象放大，还可以通过返回按钮将图片返回到原图。

    浏览器兼容性

    浏览器兼容性
    时间：2014-11-10
    阅读：7023

简要教程

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

HTML

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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来定位。

可用参数

下面是默认的参数选项：

1
2
3
4
5
6
7
8
$('#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 : '' 
});