jquery - 如何设置Jquery panzoom默认缩放?

标签 jquery jquery-plugins jquery.panzoom

Plugin Link

我想根据需要设置其默认缩放 enter image description here

请告诉我如何更改我无法使用此插件 API 找到的默认缩放值?请帮忙 ?谢谢

这是我的 HTML

<section id="focal1">
<div id="dd2">

<div class="buttons1">
        <button id="zoominbtn1" class="zoom-in-1">+</button>
        <button id="zoomoutbtn1" class="zoom-out-1">-</button>
        <input type="range" class="zoom-range-1" style="position: absolute; margin-top: 2px; background-color: cornsilk;">
        <button id="restbtn1" class="reset-1" style="margin-left: 254px;">Default Zoom</button>
      </div> 
      <div class="parent1" >
        <div class="panzoom1">
<div id="belowpart">    

<img src="" usemap='#searchplot' class='searchplot_css' title='searchplot' alt='searchplot' id='img-searchplot' />
<map id='searchplot' name='searchplot'>

</map>

</div>
</div>
</div>
</div>
    </section>

这是平移缩放功能 JS:

(function() {
        var $section = $('#focal1').first();
        $section.find('.panzoom1').panzoom({
          $zoomIn: $section.find(".zoom-in-1"),
          $zoomOut: $section.find(".zoom-out-1"),
          $zoomRange: $section.find(".zoom-range-1"),
          $reset: $section.find(".reset-1")

        });
      })();

enter image description here 我在初始化后立即调用 Zoom() 或在选项中为 startTransform 设置一个值? 我想要默认值零,并且加载图像时也应该缩小如何做到这一点?

最佳答案

初始化后立即调用 zoom()

$elem.panzoom("zoom", 1.1, {silent: true})  // +10%

或者在选项中设置startTransform的值

$elem.panzoom({
    //...
    startTransform: "scale(1.1)"  // +10%
})

(来自本期:https://github.com/timmywil/jquery.panzoom/issues/218)

编辑:

(function() {
    var $section = $('#focal1').first();

    var elements = $section.find('.panzoom1');

    // initialize
    elements.panzoom({
        startTransform: 1.0,  // = no zoom
        $zoomIn: $section.find(".zoom-in-1"),
        $zoomOut: $section.find(".zoom-out-1"),
        $zoomRange: $section.find(".zoom-range-1"),
        $reset: $section.find(".reset-1")
    });

    // set new zoom value with animation
    elements.panzoom("zoom", 2.0, { animate: true });  // = 200%
})();

关于jquery - 如何设置Jquery panzoom默认缩放?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37315507/

相关文章:

javascript - 如何使用 javascript 查找当前窗口偏移量?

javascript - 使用 FullCalendar 和 SlickGrid 时如何选择文本

jquery - Iviewer - 旋转图像后 chrome 中的伪影

Javascript 放置问题或其他问题?

javascript - 使用 jQuery 检测字体大小(以像素为单位)

javascript - 使用带有文本框检查的 JQuery 更新表行,我需要检查文本框值

javascript - 将 jquery panzoom 与 jquery draggable 一起使用

Jquery panzoom 持续时间

jquery - 大尺寸的 svg 无法正常工作如何在 React-pan-zoon-svg 中设置大 svg?

javascript - 如何不在 <div> 上应用 CSS 文件? (不更改原始 CSS 文件。)