单击时 属性 的值增加 50%

Question

我想让 zoom in 按钮在单击时总和值增加 50%。在此代码中，我想将 Zoom 属性 操作为 #mapBox

这是 HTML，其中有放大和缩小按钮

<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

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