gpt4 book ai didi

Jquery panzoom 持续时间

转载 作者:行者123 更新时间:2023-12-01 04:41:54 26 4
gpt4 key购买 nike

有人能够获得 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);
});

最佳答案

为什么不直接用 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")
});

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

编辑:

您需要为“zoom”赋予 true bool 属性,以在选项中设置您自己的持续时间,如文档中所述:

“如果该方法传递一个 bool 值,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" 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>

关于Jquery panzoom 持续时间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35834012/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com