javascript - jQuery panzoom缩放所有元素

我正在使用jQuery panzoom缩放图像和一些div元素。这通常可以工作，但是位于图像顶部的元素不会停留在其原始位置。无论如何，在缩放时将div元素保持在原位置？

JSFiddle：https://jsfiddle.net/828wu2dy/

HTML：

<section id="inverted-contain">
    <div class="panzoom-elements">
        <div class="item item1">ITEM 1</div>
        <div class="item item2">ITEM 2</div>
        <div class="panzoom">
            <img src="http://www.hdwallpapers.in/walls/enchanted_forest-wide.jpg">
        </div>
    </div>

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

JS：

(function() {
    var $section = $('#inverted-contain');
    $section.find('.panzoom').panzoom({
        $zoomIn: $section.find(".zoom-in"),
        $zoomOut: $section.find(".zoom-out"),
        $zoomRange: $section.find(".zoom-range"),
        $reset: $section.find(".reset"),
        $set: $section.find('.panzoom-elements > div'),
        startTransform: 'scale(0)',
        increment: 0.1,
        minScale: 1,
        maxScale: 2,
        contain: 'invert'
    }).panzoom('zoom');
})();

CSS：

.panzoom-elements {
    width: 50%;
    height: 400px;
}

.item {
    position: absolute;
    z-index: 10;
}

.item.item1 {
    color: white;
    background: black;
    width:50px;
    height:50px;
    top: 300px;
    left: 100px;
}

.item.item2 {
    color: white;
    background: black;
    width:50px;
    height:50px;
    top: 200px;
    left: 150px;
}

另一个问题是它也不会水平拖动。

我已经尝试了所有我能想到的。

最佳答案

第1部分：

要解决“项目”问题-尝试将“项目”元素与“ img”放在一个级别上-我的意思是将它们放入div class ='panzoom'中。

为我工作。 ^^

<section id="inverted-contain">
    <div class="panzoom-elements">
        <div class="panzoom">
            <div class="item item1">ITEM 1</div>
            <div class="item item2">ITEM 2</div>
            <img src="http://www.hdwallpapers.in/walls/enchanted_forest-wide.jpg">
        </div>
    </div>

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

这种思想方法导致了我这个答案：在学习API的panzoom文档并检查您的小提琴时，我发现'img'或任何可以看作是它的直接选择器的东西（我的意思是像$（'。panzoom' ）.child（）。first（）在您的脚本中未提及。这意味着img可能不是自己进行放大/缩小的。接下来我想到的-似乎是父级正在改变。这意味着您需要将您的物品放在变化的空间内-这是处理该问题的最合乎逻辑的方式...我试图测试该想法-并且它起作用了。



第2部分：


  另一个问题是它也不会水平拖动。


将此添加到您的CSS

.panzoom{ width: 1920px;}

这是图像的尺寸。为我工作。
也许您还可以增加.panzoom图像的高度。在水平图像中，这不是必需的，但是在垂直图像中可能会很重要。