设置 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>

  $('.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>