放大&缩小在chrome中不起作用

zoom-in & zoom-out is not working in chrome

本文关键字：chrome 不起作用 缩小 amp 放大      更新时间：2023-09-26

我有两个按钮（放大和缩小），在放大按钮上单击#Pagediv应放大，在缩小按钮上单击#Pagediv应缩小。为此，我编写了以下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浏览器。我该如何解决这个问题？

我认为这将帮助您

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

您的-webkit-transform值与其他两个转换不匹配；它说CCD_ 4而不是CCD_。

尝试使用以下线路：

$("#Page").css( "-webkit-transform", "scale(1,1)" );
$("#Page").css( "-webkit-transform", "scale(2.4,2.4)" );
相关文章：