3

设想：

  • 我已经堆叠（分层）图像，代表图像的各个部分。
  • 两个有透明的png一起做一个产品。我正在根据下拉菜单更改特定的 png 图像。因此用户可以定制产品。

问题：

现在我想要在其中实现产品缩放功能。到目前为止，我发现的所有 jquery 插件都是基于单个图像的。

如何实现图像缩放功能，它不需要单个图像来缩放它，但可能是整个堆叠图像容器？

[编辑]

到目前为止我已经尝试过：

我已经尝试过任何 Zoomer jQuery 插件，但它没有用。你可以在这里看到它。我用来实现的代码如下。

HTML

<div id="image-canvas">
        <div class="small">
            <div data-filter="filter1" class="layer layer1"><img alt="smaller" src="http://kowsky.projekt.dealux.de/wp-content/uploads/2013/09/rohr-66dddd-266x400.png"></div>
            <div data-filter="filter2" class="layer layer2"><img alt="smaller" src="http://kowsky.projekt.dealux.de/wp-content/uploads/2013/09/ergo-griff-000000-266x400.png">/div>
        </div>

        <div class="large">
            <div data-filter="filter1" class="layer layer1"><img alt="larger" src="http://kowsky.projekt.dealux.de/wp-content/uploads/2013/09/rohr-66dddd.png"></div>
            <div data-filter="filter2" class="layer layer2"><img alt="larger" src="http://kowsky.projekt.dealux.de/wp-content/uploads/2013/09/ergo-griff-000000.png"></div>
        </div>
    </div>

JS

$("#image-canvas").anythingZoomer({
         smallArea   : 'small',
         largeArea   : 'large',
});

笔记：

透明 PNG 是绝对定位的。

4

1 回答 1

1

您可以使用panzoom 库。

将它包含在您的标题中并添加一个带有 id 的 div，您可以稍后使用 panzoom 函数引用它。

HTML

<div id="panzoom">
  <img src="http://kowsky.projekt.dealux.de/wp-content/uploads/2013/09/rohr-66dddd-266x400.png">
  <img src="http://kowsky.projekt.dealux.de/wp-content/uploads/2013/09/ergo-griff-000000-266x400.png">
</div>

<div>
  <button class="zoom-in">Zoom In</button>
  <button class="zoom-out">Zoom Out</button>
  <input type="range" class="zoom-range">
</div>

jQuery

$('#panzoom').panzoom({
  $zoomIn: $(".zoom-in"),
  $zoomOut: $(".zoom-out"),
  $zoomRange: $(".zoom-range")
});
于 2013-10-03T18:26:09.380 回答