放大和縮小在鉻合金中不起作用

我有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瀏覽器。我該如何解決這個問題？

來源

2013-07-26 K P

嘗試添加'transform'規則，沒有供應商前綴。 – Teemu

與您手邊的問題無關，您爲什麼每行都執行一次jQuery選擇器？只需將值一次性傳遞給'.css（）'作爲散列，或者將'.css（）'調用鏈接在一起。每次都不需要讓jQuery查找'＃頁面'。 :) – Lambart

我認爲這將有助於你

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

    });

來源

2013-07-26 13:22:28 n8coder

您的-webkit-transform值與其他兩個轉換不匹配;它表示scale(1)而不是scale(1,1)。

嘗試使用這些行：

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

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

來源

2013-07-26 12:54:16

放大和縮小在鉻合金中不起作用

回答

相關問題