jquery - css 缩放会减少但不能正确增加

Question

我正在使用以下功能来缩放 div。当您缩小（向下滚动）时，它工作得相当好，但是当您放大（向上滚动）时，currentZoom 会跳到 10 而不是 1.1。从那时起，您可以缩小但不能再次放大（我假设 CSS 缩放是有限的）。

我错过了什么？

$('#workArea').on('mousewheel DOMMouseScroll', function (e) {
    e.preventDefault();
    var currentZoom = $(this).css('zoom');
    alert(currentZoom);
    if (e.originalEvent.wheelDelta > 0) {
        currentZoom += .1;
        $(this).animate({ 'zoom': currentZoom }, 400);
    } else {
        currentZoom -= .1;
        $(this).animate({ 'zoom': currentZoom }, 400);
    }
});

归功于event.wheelDelta为鼠标滚轮代码返回 undefined

Answer 1

所有 CSS 属性都以字符串形式返回。这意味着currentZoom += .1将导致10.1. 我猜你是对的，并且 CSS 缩放限制在固定范围内。当您返回到缩放级别 1 时，放大应该会再次起作用。

要解决此问题，请尝试currentZoom = parseFloat($(this).css("zoom"));或
currentZoom = +$(this).css("zoom")