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。

将它包含在标题中并添加一个带有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")
});

产品图像使用多层图像缩放

1 个答案: