設置 maxzoom 和 minzoom 屬性

Question

我想設置 maxzoom 和 minzoom 屬性 - 因為當我單擊放大按鈕時，文本變得越來越大，所以我想在我的 jquery 代碼中設置 maxzoom 和 minzoom 屬性。

我的 html 代碼和 jquery 代碼如下。

重置按鈕工作正常，但是當我繼續單擊放大和縮小按鈕時，文本變得越來越大，在縮小屬性中，文本變得越來越小......所以我想設置 maxzoom 和 minzoom 屬性。

<button class="zoomIn">Zoom In</button>
<button class="zoomOff">Reset</button>
<button class="zoomOut">Zoom Out</button>enter code here

<script>
  $('.open-book').css({
    // 'position' : 'absolute',
    'top' : '0px',
    'left' : '0px',
    'height' : $('.outboard').height(),
    'width' : $('.outboard').width()
  });

  var currZoom = 1;

  $(".zoomIn").click(function(){

    currZoom+=0.1;

    $('.open-book').css({
      // 'position' : 'absolute',
      // 'top' : '45px',
      // 'left' : '20px',
      // 'height' : $(window).height()-65,
      // 'width' : $(window).width()-40,
      'zoom' : currZoom
    });
  });
  $(".zoomOff").click(function(){

    currZoom=1;

    $(".open-book").css({
      // 'position' : 'absolute',
      // 'top' : '45px',
      // 'left' : '20px',
      // 'height' : $(window).height()-65,
      // 'width' : $(window).width()-40,
      'zoom' : currZoom
    });
  });
  $(".zoomOut").click(function(){

    currZoom-=0.1;

    $('.open-book').css({
      // 'position' : 'absolute',
      // 'top' : '45px',
      // 'left' : '20px',
      // 'height' : $(window).height()-65,
      // 'width' : $(window).width()-40,
      'zoom' : currZoom
    });
  });
</script>

Answer 1

您必須定義minZoom和maxZoom值並與currZoom進行比較。 通過包裝if條件和更改元素CSS比較值。

試試這個代碼。

<button class="zoomIn">Zoom In</button>
<button class="zoomOff">Reset</button>
<button class="zoomOut">Zoom Out</button>enter code here

<script>
  $('.open-book').css({
    // 'position' : 'absolute',
    'top' : '0px',
    'left' : '0px',
    'height' : $('.outboard').height(),
    'width' : $('.outboard').width()
  });

  var currZoom = 1;
  var minZoom = 1;
  var maxZoom = 2;

  $(".zoomIn").click(function(){

    if(maxZoom >= currZoom){
      currZoom+=0.1;
      $('.open-book').css({
        // 'position' : 'absolute',
        // 'top' : '45px',
        // 'left' : '20px',
        // 'height' : $(window).height()-65,
        // 'width' : $(window).width()-40,
        'zoom' : currZoom
      });
    }

  });
  $(".zoomOff").click(function(){

    currZoom=1;

    $(".open-book").css({
      // 'position' : 'absolute',
      // 'top' : '45px',
      // 'left' : '20px',
      // 'height' : $(window).height()-65,
      // 'width' : $(window).width()-40,
      'zoom' : currZoom
    });
  });
  $(".zoomOut").click(function(){

    if(minZoom <= currZoom){
      currZoom-=0.1;
      $('.open-book').css({
        // 'position' : 'absolute',
        // 'top' : '45px',
        // 'left' : '20px',
        // 'height' : $(window).height()-65,
        // 'width' : $(window).width()-40,
        'zoom' : currZoom
      });
    }

  });
</script>