Question

我想设置maxzoom和minzoom属性-因为当我单击zoomin按钮时，文本变得越来越大，所以我想在我的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>

设置maxzoom和minzoom属性

1 个答案: