當點擊

Question

時，總和要多出50％的價值。我想讓zoom in按鈕在單擊時總是增加50％。在這段代碼中，我要處理的Zoom屬性爲#mapBox

這個地方有按鈕來放大和縮小

<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的，我的zoom樣式添加到div #mapBox的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 + "%" 
    }); 
});