javascript - 放大和缩小在 chrome 中不起作用

Question

我有 2 个按钮(放大和缩小)，在放大按钮上单击 #Page div 应该放大，在缩小按钮上单击 #Page div 应该缩小。为此，我编写了以下 javascript，

缩小按钮

$("#zoomout").click(
    function(e){
        $("#Page").css( "zoom", "1" );
        $("#Page").css( "-o-transform", "scale(1,1)" );
        $("#Page").css( "-moz-transform", "scale(1,1)" );
        $("#Page").css( "-webkit-transform", "scale(1)" );
        e.preventDefault();     
});

放大按钮

$("#zoomin").click(
    function(e){        
        $("#Page").css( "zoom", "2.4" );
        $("#Page").css( "-o-transform", "scale(2.4,2.4)" );
        $("#Page").css( "-moz-transform", "scale(2.4,2.4)" );
        $("#Page").css( "-webkit-transform", "scale(2.4)" );
        e.preventDefault();
});

此脚本在 Mozilla Firefox 浏览器上运行良好，但不适用于 Google Chrome 浏览器。我该如何解决这个问题？

Answer 1

我想这对你有帮助

$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase()); 

$("#zoomout").click(
    function(e){
            if($.browser.chrome)
            {
                $("#Page").css("-webkit-transform-origin","0 0");
                $("#Page").css("-webkit-transform","scale(1)");
                $(".Page").css( "background-size", "contain" );
                e.preventDefault();
            }
            else
            {
                    $("#Page").css( "zoom", "1" );
                    $("#Page").css( "-o-transform", "scale(1,1)" );
                    $("#Page").css( "-moz-transform", "scale(1,1)" );
                    $("#Page").css( "-webkit-transform", "scale(1)" );
                    e.preventDefault();
            }
    });


$("#zoomin").click(
    function(e){
            if($.browser.chrome)
            {
                $("#Page").css("-webkit-transform-origin","0 0");
                $("#Page").css("-webkit-transform","scale(2.4)");
                $(".Page").css( "background-size", "100%" );
                e.preventDefault();
            }
            else
            {

                    $("#Page").css( "zoom", "2.4" );
                    $("#Page").css( "-o-transform", "scale(2.4,2.4)" );
                    $("#Page").css( "-moz-transform", "scale(2.4,2.4)" );
                    $("#Page").css( "-webkit-transform", "scale(2.4)" );
                    e.preventDefault();
            }

    });