Question

HTML

<button class="zoom_plus">+</button>
<button class="zoom_minus">-</button>
<div class="map" data-scale="0">
   <svg>...</svg>
</div>

JS scaledown（如何不缩小比原始大小？）：

var $map = $(".map");
$(".zoom_minus").on("click", function(){
    var $svg = $map.find('svg');
    var current_scale = $map.attr('data-scale');
        current_scale = parseInt(current_scale,10);
    var sclae_to = current_scale - 2;

    $svg.css({'transform': 'scale('+ sclae_to +')'});
    $map.attr('data-scale',sclae_to);
});

JS scale UP

$(".zoom_plus").on("click", function(){
    var $svg = $map.find('svg');
    var current_scale = $map.attr('data-scale');
        current_scale = parseInt(current_scale,10);
    var sclae_to = current_scale + 2;

    $svg.css({'transform': 'scale('+ sclae_to +')'});
    $map.attr('data-scale',sclae_to);
});

Answer 1

保存数据规模的初始值并有条件地使用scaleDown：

var $map = $(".map");
var initialScale=parseInt($map.attr('data-scale'));

$(".zoom_plus").on("click", function(){
    var $svg = $map.find('svg');
    var current_scale = $map.attr('data-scale');
        current_scale = parseInt(current_scale,10);
    var sclae_to = current_scale - 2;

    //Perform this check
    if(sclae_to<initialScale){sclae_to=initialScale;}

    $svg.css({'transform': 'scale('+ sclae_to +')'});
    $map.attr('data-scale',sclae_to);
});

此外，在地图上定义两个onClick函数似乎不正确！

如何限制svg的缩小不小于其原始大小？

1 个答案: