如何使用 JS 或 Jquery 为 div 标记设置缩放控制限制

Question

我有一个div标签，我需要设置最大缩放和最小缩放的限制如何在Jquery或JS中执行此操作？

我需要 css 缩放属性而不是谷歌 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);
  }
});