使用javascript为所有浏览器ZoomIn和zoomOut元素

Question

我想为我的网页中的元素实现放大，缩小功能，它应该适用于所有浏览器。我已经完成了一些代码，但是它没有在firefox上运行，因为我已经为缩放提供了CSS缩放。在这里我的代码

var currentZoom = 1.0;
var zoomElement = $('.ci-journey-interactions-canvas__row');
$('#btn_ZoomIn').click(
    function () {
    $("body").addClass("zoom-active");
    if ($(zoomElement).css('zoom') >= 1.75) {
        alert('Maximum zoomin')
    } else {
        $(zoomElement).animate({
            'zoom': currentZoom += .25,
        }, {
            'complete': zoomInCallback()
        }, 'fast');
    }
});

我怎么能让所有浏览器兼容？

Answer 1

你可以在javascript中操作CSS“transform：scale（1.5）”，并使用带有overflow：hidden的容器div，这样元素就不会占用额外的空间。您还需要处理内部元素的左侧和顶部位置以使其保持居中。