jQuery缩放平移问题

jQuery panzoom panning issue

本文关键字：问题 缩放 jQuery      更新时间：2023-09-26

这是我目前的情况:

<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/

如果我向下拖动图像，图像不会"停止"在容器的顶部。我可以把ít往下拉。很难找到合适的词来形容它。

以下是两个截图:

http://uploadpie.com/Smez8

http://uploadpie.com/J2EAg

对于任何帮助，我将非常感激!!

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

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

如果我明白你想要达到的目标，这可能会让你更接近你想要做的事情:

(function() {
  $('#panzoom').panzoom({
    startTransform: 'scale(5)',
    increment: 0.1,
    minScale: 1,
    contain: 'invert'
  }).panzoom('zoom');
})();
https://jsfiddle.net/ruc2y97r/

我想你要找的包含选项是'invert'。希望这对你有帮助!

相关文章：