javascript - jQuery panzoom 缩放所有元素

Question

我正在使用 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;
}

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

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

Answer 1

第 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 文档并检查你的 fiddle 时，我发现 'img' 或任何可以被视为它的直接选择器的东西(我的意思是 $(' .panzoom').child().first() 在你的脚本中没有被提及。这意味着 img 很可能不是自己放大/缩小。我接下来的想法 - 似乎它的 parent 正在改变。那意味着你需要将你的元素放在那个不断变化的空间内 - 这是处理它的最合乎逻辑的方式......我试图测试这个想法 - 它奏效了。

---

第 2 部分:

The other problem is that it also doesn't drag horizontally.

将此添加到您的 CSS

.panzoom{ width: 1920px;}

这是图像的大小。为我工作。也许您还可以添加图像的 .panzoom 高度。在您的图像是水平的情况下不需要它，但当图像是垂直的时候它可能很重要。