设置 maxzoom 和 minzoom 属性

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

    });

  });

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>&nbsp; $('.open-book').css({&nbsp; &nbsp; // 'position' : 'absolute',&nbsp; &nbsp; 'top' : '0px',&nbsp; &nbsp; 'left' : '0px',&nbsp; &nbsp; 'height' : $('.outboard').height(),&nbsp; &nbsp; 'width' : $('.outboard').width()&nbsp; });&nbsp; var currZoom = 1;&nbsp; var minZoom = 1;&nbsp; var maxZoom = 2;&nbsp; $(".zoomIn").click(function(){&nbsp; &nbsp; if(maxZoom >= currZoom){&nbsp; &nbsp; &nbsp; currZoom+=0.1;&nbsp; &nbsp; &nbsp; $('.open-book').css({&nbsp; &nbsp; &nbsp; &nbsp; // 'position' : 'absolute',&nbsp; &nbsp; &nbsp; &nbsp; // 'top' : '45px',&nbsp; &nbsp; &nbsp; &nbsp; // 'left' : '20px',&nbsp; &nbsp; &nbsp; &nbsp; // 'height' : $(window).height()-65,&nbsp; &nbsp; &nbsp; &nbsp; // 'width' : $(window).width()-40,&nbsp; &nbsp; &nbsp; &nbsp; 'zoom' : currZoom&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; });&nbsp; $(".zoomOff").click(function(){&nbsp; &nbsp; currZoom=1;&nbsp; &nbsp; $(".open-book").css({&nbsp; &nbsp; &nbsp; // 'position' : 'absolute',&nbsp; &nbsp; &nbsp; // 'top' : '45px',&nbsp; &nbsp; &nbsp; // 'left' : '20px',&nbsp; &nbsp; &nbsp; // 'height' : $(window).height()-65,&nbsp; &nbsp; &nbsp; // 'width' : $(window).width()-40,&nbsp; &nbsp; &nbsp; 'zoom' : currZoom&nbsp; &nbsp; });&nbsp; });&nbsp; $(".zoomOut").click(function(){&nbsp; &nbsp; if(minZoom <= currZoom){&nbsp; &nbsp; &nbsp; currZoom-=0.1;&nbsp; &nbsp; &nbsp; $('.open-book').css({&nbsp; &nbsp; &nbsp; &nbsp; // 'position' : 'absolute',&nbsp; &nbsp; &nbsp; &nbsp; // 'top' : '45px',&nbsp; &nbsp; &nbsp; &nbsp; // 'left' : '20px',&nbsp; &nbsp; &nbsp; &nbsp; // 'height' : $(window).height()-65,&nbsp; &nbsp; &nbsp; &nbsp; // 'width' : $(window).width()-40,&nbsp; &nbsp; &nbsp; &nbsp; 'zoom' : currZoom&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; });</script>