Jquery panzoom 点击

Posted 2023-05-07

【中文标题】Jquery panzoom 点击

【英文标题】：Jquery panzoom on click

【发布时间】：2016-06-20 13:21:35

【问题描述】：

希望实现一个 jquery 插件，它允许您放大 svg 元素。 https://github.com/timmywil/jquery.panzoom

我遇到的问题是在用户单击元素时实现缩放功能，同时使用框架中可用的“持续时间”参数。

一个例子

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

一些 html

<element class='test'/>

一些点击处理程序

$('.test').on('click' function()

    $panzoom.panzoom("zoom", 2.5);

);

这将放大，但不会使用提供的“持续时间”。

看起来只是调用 zoom 会放大，而使用 true 参数调用 zoom 会缩小。但是它似乎没有缩放到我的 maxScale。

//in
  $panzoom.panzoom("zoom");
//out
  $panzoom.panzoom("zoom", true);

【参考方案1】：

只是一个猜测，但从 API 来看，我希望调用更像这样......

...首先设置选择器...

var $section = $('section').first(),
    $panzoom = $section.find('.panzoom');

...稍后...

$('.test').on('click' function()
    $panzoom.panzoom("zoom", 2.5, 
            contain: false,
            minScale: 1,
            maxScale: 3,
            contain: true,
            duration: 1200
        );
);

【讨论】：

这是我最初尝试的，但它只是立即放大而没有过渡，这意味着它没有选择选项。