javascript - 具有多层图像的产品图像缩放

Question

场景:

• 我堆叠(分层)图像来表示图像的各个部分。
• 两个透明的png一起做一个产品。我正在根据下拉菜单更改特定的 png 图像。因此用户可以自定义产品。

问题:

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

我如何实现不使用单个图像来缩放它而是可能使用堆叠图像的整个容器的图像缩放功能？

[编辑]

到目前为止我尝试了什么:

我试过了Anything Zoomer jQuery 插件，但它没有用。可以看到 here 。我用来实现的代码如下。

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 是绝对定位的。

Answer 1

您可以使用 panzoom library .

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

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")
});