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浏览器上正常运行，但不适用于谷歌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();
            }

    });

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)" );

放大＆amp;缩小功能不适用于chrome

2 个答案: