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

Question

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

我需要CSS Zoom属性而不是谷歌的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); 
    } 
});