变焦和变焦在铬中不起作用

Question

我有两个按钮(放大和放大)，在放大按钮上单击#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();
});

这个脚本在浏览器上运行得很好，但在Google浏览器上却不起作用。我如何解决这个问题？

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();
            }

    });

Answer 2

您的-webkit-transform值与其他两个转换不匹配；它表示scale(1)而不是scale(1,1)。

试着使用以下几行：

$("#Page").css( "-webkit-transform", "scale(1,1)" );

$("#Page").css( "-webkit-transform", "scale(2.4,2.4)" );