Question

有没有人能够让panzoom的持续时间发挥作用？ https://github.com/timmywil/jquery.panzoom

我进入源代码并将持续时间从200增加到1200，并且在调用缩放时没有看到更改。

         var $section = $('section').first();
         $panzoom =  $section.find('.panzoom').panzoom({
            contain: false,
            minScale: 1,
            maxScale: 3,
            contain: true,  
            duration:1200
          }).panzoom('zoom', true);


$(elm).on('click' function(){

 $panzoom.panzoom("zoom", true);
});

更新

{{1}}

Answer 1

为什么不用option（）方法更改它？来自panzoom docs:

// One at a time
// Sets the scale increment option
$elem.panzoom("option", "duration", 1200);

// Several options at once
$elem.panzoom("option", {
  increment: 0.4,
  minScale: 0.1,
  maxScale: 2,
  duration: 500,
  $reset: $("a.reset-panzoom, button.reset-panzoom")
});

您不必更改来源中的任何默认设置以设置不同的持续时间。

编辑：

你需要提供＆＃34; zoom＆＃34;布尔属性为true，用于在选项中设置您自己的持续时间，如文档中所述：

＆＃34;如果方法传递了一个布尔值，则true表示根据options中指定的增量执行缩小。如果为false（或省略），则将执行放大。＆＃34;

下面是一个工作版本，我在选项（2500）中设置了自定义持续时间并使用了panzoom（＆＃34;缩放＆＃34;，true）：

＆＃13;

<html>
  <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://timmywil.github.io/jquery.panzoom/dist/jquery.panzoom.js"></script>
  </head>
  <body>
    <section id="contain">
      <h1>Containment within the parent element</h1>
      <div class="panzoom-parent" style="overflow: hidden; position: relative;">
        <img class="panzoom" src="http://blog.millermedeiros.com/wp-content/uploads/2010/04/awesome_tiger.svg" width="900" height="900" style="transform: matrix(0.9, 0, 0, 0.9, -46, 44); backface-visibility: hidden; transform-origin: 50% 50% 0px; cursor: move; transition: transform 200ms ease-in-out;">
      </div>
      
      <div class="buttons">
        <button class="zoom-in">Zoom In</button>
        <button class="zoom-out">Zoom Out</button>
        <input type="range" class="zoom-range" step="0.05" min="0.4" max="0.9">
        <button class="reset">Reset</button>
      </div>
      <script>
        (function() {
          var $section = $('#contain');
          var $panzoom = $section.find('.panzoom').panzoom({
            $zoomIn: $section.find(".zoom-in"),
            $zoomOut: $section.find(".zoom-out"),
            $zoomRange: $section.find(".zoom-range"),
            $reset: $section.find(".reset"),
            startTransform: 'scale(0.9)',
            maxScale: 0.9,
            increment: 0.1,
            contain: true,
            duration:2500
          }).panzoom('zoom', true);
        })();
      </script>
    </section>
  </body>
</html>

＆＃13;

Jquery panzoom持续时间

1 个答案: