クリックするとプロパティの値が50％多くなります。

Question

zoom inボタンをクリックすると常に値に50％多く加算されます。このコードでは、私は#mapBox

この私がdiv要素#mapBoxへzoomスタイルを追加する場所でとOut

<img src="images/zoomIn.jpg" alt="Zoom In" id="zoomInButton" /> //Zoom In 
<img src="images/zoomOut.jpg" alt="Zoom Out" id="zoomOutButton" /> //Zoom Out 
<div id="mapBox"> //add zoom style here 
    <img src="images/map.svg" alt="Map" /> 
</div> 

とjQueryをズームするボタンがありますHTMLにズームプロパティを操作したいです

$(document).ready(function() { 
    $("#zoomInButton").click(function() { 
    $("#mapBox").css({ 
     "zoom" : "150%" 
    }); 
    }); 
}); 

Answer 1

は、これはかなり迅速かつ汚い一例ですが、あなたを開始するための一つの方法のアイデアを与える必要があります。これにより、ズームインとズームアウトの機能が作成され、ボタンにバインドされます。

//starting zoom amount 
var zoom = 150; 

function zoomIn(){ 
    zoom = zoom + 50; 
    $("#mapBox").css({ 
    "zoom" : zoom + "%" 
    }); 
} 

function zoomOut(){ 
    zoom = zoom - 50; 
    $("#mapBox").css({ 
    "zoom" : zoom + "%" 
    }); 
} 

$(document).ready(function() { 
    $("#zoomInButton").on('click', zoomIn); 
    $("#zoomOutButton").on('click', zoomOut); 
    $("#mapBox").css({ 
    "zoom" : zoom + "%" 
    }); 
});