如何使用JS或JQUERY為元素的ID設置縮放的最大和最小限制？

Question

在我的應用中，我有一個ID為mainDiv的DIV標簽

並且我已經應用了縮放功能，但是問題是縮放沒有限制意味着沒有上限和下限。

我在谷歌旅行，但它顯示谷歌地圖api，但我需要css屬性或js或jquery修復。

代碼如下：SVG縮放

if(evt.wheelDelta)
        delta = evt.wheelDelta / 3600; // Chrome/Safari
    else
        delta = evt.detail / -90; // Mozilla

    var z = 1 + delta; // Zoom factor: 0.9/1.1

    var g = getRoot(svgDoc);

    var p = getEventPoint(evt);

    p = p.matrixTransform(g.getCTM().inverse());

    // Compute new scale matrix in current mouse position
    var k = root.createSVGMatrix().translate(p.x, p.y).scale(z).translate(-p.x, -p.y);

        setCTM(g, g.getCTM().multiply(k));

    if(typeof(stateTf) == "undefined")
        stateTf = g.getCTM().inverse();

    stateTf = stateTf.multiply(k.inverse());

請幫忙

Answer 1

像這樣嗎

(function ($) {

var $parent = $('#floor_plan');

if($parent.length) {

    // set-up panzoom
    var $panzoom = $parent.find('.panzoom').panzoom({
        increment       : 0.5,
        minScale        : 1,
        maxScale        : 2,
        startTransform  : 'scale(4.0)',
        $zoomIn         : $parent.find('A[href=#zoom_in]'),
        $zoomOut        : $parent.find('A[href=#zoom_out]'),
        contain         : 'invert'
    }).panzoom('zoom', true);

    // handle scrolling in and out
    $panzoom.parent().on('mousewheel.focal', function (e) {

        e.preventDefault();

        var delta = e.delta || e.originalEvent.wheelDelta;
        var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;

        $panzoom.panzoom('zoom', zoomOut, {
            increment   : 0.1,
            animate     : false,
            focal       : e
        });
    });
}

}）（jQuery）;

http://jsfiddle.net/576a4qeh/1/