jQuery panzoom 持续时间
Posted
技术标签:
【中文标题】jQuery panzoom 持续时间【英文标题】：Jquery panzoom duration 【发布时间】：2016-06-20 10:17:49 【问题描述】：有没有人能够让 panzoom 的持续时间起作用？ https://github.com/timmywil/jquery.panzoom
我进入源代码并将持续时间从 200 增加到 1200，但在调用缩放时没有看到变化。
$panzoom.panzoom("zoom", 2.5);
更新
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】：为什么不直接用 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")
);
您不必更改源中的任何默认值来设置不同的持续时间。
编辑：
您需要给“缩放”一个布尔属性 true 来设置您自己的选项持续时间，如文档中所述：
“如果方法传递一个布尔值，true 表示根据选项中指定的增量执行缩小。如果为 false（或省略），将执行放大。”
下面是一个工作版本，我在选项 (2500) 中设置了自定义持续时间并使用了 panzoom("zoom", true)：
<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" 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>【讨论】：
它不起作用。当我这样设置持续时间时，它不会改变缩放时间。 我已经更新了答案，您需要使用布尔值 true 作为“缩放”的参数来使用 options() 中设置的持续时间。 感谢您解决这个问题。当您对元素调用缩放时，您可以传递该真实值吗？ $panzoom.panzoom("缩放", 2.5, true); 是的，您只希望 ("zoom", true) 能够使用缩放和过渡的相关选项。使用整数自动将其设置为该比例数，没有过渡。在文档中：“如果该方法传递了一个数字，则 zoom() 将立即设置该比例而不进行转换。这对于范围输入和捏合手势非常有用。”因此，如果您想对比例因子使用一些手动控制，您可以使用变量作为比例整数参数，否则只需使用 true 并相应地设置选项。 对不起，我有点困惑。因此，如果我提供初始化缩放的持续时间。如何稍后在单击处理程序上调用以放大持续时间？以上是关于jQuery panzoom 持续时间的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 node 和 browserify 实现 jQuery.panzoom