如何使用JS或Jquery设置div标签的缩放控制限制？

Question

我有一个div标签，我需要设置最大缩放和最小缩放的限制，如何在Jquery或JS中做到这一点？

我需要css缩放属性，而不是Google API

实际上，现在它可以无限制地放大和缩小。

div.maxzoom？div.minZoom？

Answer 1

您需要检查最大和最小缩放值。例如，zoomP将是单击按钮。之后增加缩放值。如果缩放值为maxZoom，则不会增加缩放值。

https://jsfiddle.net/7tzhq8zh/

HTML：

<button id="zoomP">Zoom++</button>
<button id="zoomN">Zoom--</button>

<div id="zoomDiv">
  zoom: <span id="zoomVal">1</span>
</div>

jS：

$(function(){
  var minZoom = 1;
  var maxZoom = 5;
  var $zoomP = $('#zoomP');
  var $zoomM = $('#zoomN');
  var $zoomDiv = $('#zoomDiv');
  var $zoomVal = $('#zoomVal');
  $zoomP.on('click', function(e){
      zoom(1);
  });
  $zoomM.on('click', function(e){
      zoom(-1);
  });
  function zoom(num) {
    var zoomVal = parseInt($zoomDiv.css('zoom'), 10);
    zoomVal = zoomVal + num;
    // check limits
    if (zoomVal < minZoom || zoomVal > maxZoom) {
        return;
    }
    $zoomDiv.css('zoom', zoomVal);
    $zoomVal.html(zoomVal);
  }
});