jQuery panzoom 平移问题

Posted 2023-05-07

【中文标题】jQuery panzoom 平移问题

【英文标题】：jQuery panzoom panning issue

【发布时间】：2016-12-16 23:05:19

【问题描述】：

这就是我目前所拥有的：

<div id="container" style="width:400px;height:400px;overflow:hidden">
    <img id="panzoom" src="http://uploadpie.com/QBTlw">
</div>

$(document).ready(function()
    $("#panzoom").panzoom(
        increment: 0.1,
        rangeStep: 0.1,
        minScale: 1,
        duration: 200,
        exponential: true,
        panOnlyWhenZoomed: false,

        $zoomIn: $(".controls").find(".zoom-in"),
        $zoomOut: $(".controls").find(".zoom-out"),
        $zoomRange: $(".controls").find(".zoom-range"),
        contain: 'automatic',
        onPan : function ()
        


        
    );
);

https://jsfiddle.net/7yhjwLhf/6/

如果我将图像向下拖动，图像不会“停止”在容器顶部。我可以把它拉得更远。很难找到合适的词来形容它。

这里有两张截图：

http://uploadpie.com/Smez8

http://uploadpie.com/J2EAg

如有任何帮助，我将不胜感激！

【参考方案1】：

这是因为您的容器小于图像的 50%，因此“包含”功能不可能在中心停止，因为默认情况下它已经通过中心。

将容器大小增加到 800px / 800px，它应该更接近预期。对您的图像和容器进行尺寸调整，以达到您期望的遏制效果。

【讨论】：

但我需要 100% 的图像宽度。所以图像最终出现在浏览器窗口的左右两侧。像这样的东西：jsfiddle.net/7yhjwLhf/10

嗯，但现在它不能上下拖动了。并且不可缩放。

【参考方案2】：

如果我了解您想要实现的目标，这可能会让您更接近您想要做的事情：

(function() 
  $('#panzoom').panzoom(
    startTransform: 'scale(5)',
    increment: 0.1,
    minScale: 1,
    contain: 'invert'
  ).panzoom('zoom');
)();

https://jsfiddle.net/ruc2y97r/

我认为您正在寻找的包含选项是“反转”。希望对您有所帮助！

【讨论】：

好的，但如果高度很小，我无法到达图像的底部。看这里jsfiddle.net/ruc2y97r/1

我认为这只是由于您的图像比例不匹配造成的，试试这个：jsfiddle.net/auaskm90 - 看看我如何将容器的宽度和高度设置为与原始图像相同的比例。 .. 工作正常。

是的，我们离得更近了。但图像必须始终具有 100%。因此，如果我调整浏览器的大小或以 1000 x 500 像素打开浏览器，我将无法设置正确的比例。在这种情况下，我希望图像在中间垂直显示，我可以向上和向下拖动它。