平移缩放 JQuery 功能答案

【问题标题】：Pan Zoom JQuery functionality平移缩放 JQuery 功能
【发布时间】：2013-11-06 14:24:54
【问题描述】：

HTML 和 Javascript

<section>
     <h1>Panning and zooming with CSS3</h1>

    <div class="parent">
        <div class="panzoom">
            <img src="image1" width="400" height="400">
        </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>
    <script>
        (function() {
            var $section = $('section').first();
            $section.find('.panzoom').panzoom({
                $zoomIn: $section.find(".zoom-in"),
                $zoomOut: $section.find(".zoom-out"),
                $zoomRange: $section.find(".zoom-range"),
                $reset: $section.find(".reset")
            });
        })();
    </script>
</section>

我正在使用 Pan Zoom 插件。

https://github.com/timmywil/jquery.panzoom

如何限制缩小功能。我的意思是我想将图像缩小到图像的特定大小，例如 100 像素。

演示 http://timmywil.github.io/jquery.panzoom/demo/#inverted-contain

我试过Inverted containment within the parent element (to hide what's behind) 从演示。但对我来说它不起作用。请帮忙。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

我知道这是旧的，但是如果您使用 minScale，您可以得到您喜欢的。您可以阅读 README 文件中的文档：

https://github.com/timmywil/jquery.panzoom/blob/master/README.md

【讨论】：

【解决方案2】：

试试这个，这对你有用

 (function() {
    var $section = $('section').first();
    $section.find('.panzoom').panzoom({
      increment: 0.3,
      minScale: 0.8,
      maxScale: 1.3
  });

【讨论】：