如何使用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); 
    } 
});