Question

我正在使用jQuery panzoom来缩放图像和一些div元素。这通常有效，但位于图像顶部的元素不会保留在原始位置。反正有没有将div元素保持在原来的位置？

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'将'item'元素放在一个级别上 - 我的意思是将它们放在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图像高度。在您的情况下，图像是水平的，但在图像垂直时可能很重要。

jQuery panzoom扩展所有元素

1 个答案:

第1部分：

第2部分：