클릭 할 때 속성의 값으로 50 % 더 합계

Question

클릭하면 항상 zoom in 버튼이 값에 50 % 더 합계되도록하고 싶습니다. 이 코드에서, 나는 #mapBox

이 내가 사업부 #mapBox에 zoom 스타일을 추가 곳에서 아웃

<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 + "%" 
    }); 
});