javascript - 设置 maxzoom 和 minzoom 属性

Question

我想设置 maxzoom 和 minzoom 属性 - 因为当我单击 zoomin 按钮时，文本变得越来越大，所以我想在我的 jquery 代码中设置 maxzoom 和 minzoom 属性。

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

重置按钮效果很好，但是当我继续单击放大和缩小按钮时，文本变得越来越大，而在 zoomout 属性中，文本变得越来越小......所以我想设置 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>

标签： javascriptjquery

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>