如何使用JavaScript在不同瀏覽器上工作的旋轉圖像

使用JavaScript構建模擬時鐘，我知道如果我用jQuery來做這件事情會更容易，但這不是一個選項。如何使用JavaScript在不同瀏覽器上工作的旋轉圖像

一切工作在Chrome和Safari（意味着webkit瀏覽器），但沒有在其他任何人。

這是我的滴答法，基本上它是根據時間旋轉圖像。

function tick(deg, elmt){ 
document.getElementById(elmt).setAttribute(
     "style", "transform:rotate(" + deg + "deg);" 
     + "-moz-transform: (" + deg + "deg);" 
     + "-o-transform: (" + deg + "deg);" 
     + "-webkit-transform:rotate(" + deg + "deg);" 
     + "filter:progid:DXImageTransform.Microsoft.BasicImage(" + deg + "deg);" 
    ); 
}

任何建議使其工作？

來源

2011-11-24 vinc386

任何原因，你不使用jQuery的來源是什麼？沒有jQuery的JavaScript就像沒有標準庫的C一樣。 –

@MaximYegorushkin：沒有DOM API的Javascript會像沒有標準庫的C一樣。我不認爲在C語言中有一種類似於jQuery的通用模擬，除了可能用於嵌入式編程的Arduino庫C語言。 – slebetman

@slebetman：你是對的，更像是C++而沒有Boost。 –

您沒有使用rotate爲-moz-和-o-屬性時，rotation在IE語法

function tick(deg, elmt){ 
document.getElementById(elmt).setAttribute(
     "style", "transform:rotate(" + deg + "deg);" 
     + "-moz-transform: rotate(" + deg + "deg);" 
     + "-o-transform: rotate(" + deg + "deg);" 
     + "-webkit-transform:rotate(" + deg + "deg);" 
     + "-ms-transform:rotate("+ deg +"deg);" 
    ); 
}

演示在http://jsfiddle.net/gaby/fjHHX/3/

更新

改變了代碼支持IE9 -ms-延伸和除去filter一種不會允許任意轉數（只有0，90，180，270度）..

對於支持IE版本8及以下你可以使用一個矩陣變換，但它得到醜..看看部分.box_rotate在http://css3please.com/
或看看http://www.boogdesign.com/examples/transforms/matrix-calculator.html如何做到這一點

來源

2011-11-24 09:49:49

IE的旋轉過濾器不允許任意角度，只有90°的倍數http://msdn.microsoft.com/en-us/library/bb554293%28v=vs.85%29.aspx – user123444555621

@Pumbaa，好點..更新的答案反映這.. –

@ GabyakaG.Petrioli它適用於除IE8和更低的大多數瀏覽器...它看起來像這樣： http://cl.ly/CAis（屏幕截圖）它仍然蜱，但所有雙手「脫臼」 – vinc386

如何使用JavaScript在不同瀏覽器上工作的旋轉圖像

回答

相關問題