【问题标题】:How to set Jquery panzoom default zoom?如何设置 Jquery panzoom 默认缩放?
【发布时间】:2016-09-15 21:04:54
【问题描述】:

Plugin Link

我想设置我需要的默认缩放

请告诉我如何更改此插件 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")

        });
      })();

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

【问题讨论】:

    标签: jquery jquery-plugins jquery.panzoom


    【解决方案1】:

    在初始化后立即调用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%
    })();
    

    【讨论】:

    • 感谢您的回答,请再次查看我的问题并告诉我在哪里应用您告诉我的这些选项..
    • 如文档和我发布的链接(最后一个条目)中所示...只需在对象中添加startTransform 选项(以及所有$... 选项)你就是传递给.panzoom()
    • 此解决方案设置默认缩放值,但我希望我的图像也缩小
    • 请再次查看我想要的问题
    • 阅读文档我在示例中传递的值有什么影响
    【解决方案2】:

    像这样改变你的功能

    (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"),
              startTransform: "scale(1.1)"
    
            });
          })();
    

    【讨论】:

      猜你喜欢
      • 2016-09-15
      • 2019-08-10
      • 1970-01-01
      • 2022-01-14
      • 2020-12-18
      • 2016-08-27
      • 2019-06-08
      • 2012-03-25
      • 1970-01-01
      相关资源
      最近更新 更多