如何在除IE以外的瀏覽器中的JavaScript中旋轉圖像/ div

我需要按照用戶指定的角度以晝夜旋轉圖像。如何在除IE以外的瀏覽器中的JavaScript中旋轉圖像/ div

我使用下面的代碼，但它只適用於IE而不適用於任何其他瀏覽器。

<div id="frame1" style="overflow:hidden" width='300' height='300'> 
    <div id="frame2" width='200' height='200'> 
     <img src='1.jpeg'' id='im' src='1.jpeg' width='10' height='10'> 
    </div> 
</div> 

<script type="text/javascript"> 

rotate(frame2, 45); 

function rotate (elem, deg) 
{ 
    if (navigator.appName=='Microsoft Internet Explorer') 
    { 
     rad = deg*Math.PI/180; 

     elem.style.filter="progid:DXImageTransform.Microsoft.Matrix(M11='1.0', sizingmethod='auto expand')"; 

     elem.filters.item(0).M11 = Math.cos(rad); 
     elem.filters.item(0).M12 = -Math.sin(rad); 
     elem.filters.item(0).M21 = Math.sin(rad); 
     elem.filters.item(0).M22 = Math.cos(rad); 
     elem.style.marginLeft=((canvsize-elem.offsetWidth)/2)+'px' 
     elem.style.marginTop=((canvsize-elem.offsetHeight)/2)+'px' 
    } 
    else 
    { 
     elem.style.MozTransform = 'rotate(' + deg + ')'; 
     elem.style.WebkitTransform = 'rotate(' + deg + ')'; 
     elem.style.OTransform  = 'rotate(' + deg + ')'; 
     elem.style.MsTransform  = 'rotate(' + deg + ')'; 
     elem.style.transform  = 'rotate(' + deg + ')'; 
    } 
} 

</script>

你能幫忙嗎？

來源

2011-12-13 Andrey Rubliov

僅供參考，瀏覽器檢測是邪惡的。您的代碼在IE10中不起作用，因爲`navigator.appName`等於`'Microsoft Internet Explorer'`，但刪除了對過濾器的支持。更好地檢查`elem.style`中是否存在'* transform`屬性，如果不是，則使用過濾器回退。 – duri 2011-12-13 18:06:11

在IE瀏覽器中實際上更容易。 MDN有good documentation關於如何使用CSS3做到這一點。還有一些here。

對於Webkit瀏覽器，this page應該有所幫助。

來源

2011-12-13 17:30:12 Bojangles

您忘記了將deg添加到css屬性中。

您還應該爲圖片添加transform origin以使其圍繞中心旋轉（假設您正在嘗試執行此操作）。

此代碼應該這樣做。

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 

<style> 
</style> 

</head> 
<body> 

<div id="frame1" style="overflow:hidden" width='300' height='300'> 
    <div id="frame2" width='200' height='200'> 
     <img src='1.jpeg' id='im' src='1.jpeg' width='10' height='10'> 
    </div> 
</div> 

<script type="text/javascript"> 

rotate(frame2, 45); 

function rotate (elem, deg) 
{ 
    if (navigator.appName=='Microsoft Internet Explorer') 
    { 
     rad = deg*Math.PI/180; 

     elem.style.filter="progid:DXImageTransform.Microsoft.Matrix(M11='1.0', sizingmethod='auto expand')"; 

     elem.filters.item(0).M11 = Math.cos(rad); 
     elem.filters.item(0).M12 = -Math.sin(rad); 
     elem.filters.item(0).M21 = Math.sin(rad); 
     elem.filters.item(0).M22 = Math.cos(rad); 
     elem.style.marginLeft=((canvsize-elem.offsetWidth)/2)+'px' 
     elem.style.marginTop=((canvsize-elem.offsetHeight)/2)+'px' 
    } 
    else 
    { 

     elem.style.MozTransformOrigin = "5px 5px"; 
     elem.style.WebkitTransformOrigin = "5px 5px"; 
     elem.style.OTransformOrigin = "5px 5px"; 
     elem.style.MsTransformOrigin = "5px 5px"; 
     elem.style.transformOrigin = "5px 5px"; 

     elem.style.MozTransform = 'rotate(' + deg + 'deg)'; 
     elem.style.WebkitTransform = 'rotate(' + deg + 'deg)'; 
     elem.style.OTransform  = 'rotate(' + deg + 'deg)'; 
     elem.style.MsTransform  = 'rotate(' + deg + 'deg)'; 
     elem.style.transform  = 'rotate(' + deg + 'deg)'; 
    } 
} 

</script> 

</body> 
</html>

來源

2011-12-13 17:38:04

非常感謝，它工作！ – 2011-12-13 17:56:19

沒問題。順便說一下，您可能需要考慮只爲一個變量定義一個字符串，然後將每個屬性設置爲已定義的字符串變量。這使得未來改變價值變得更容易。 – 2011-12-13 17:59:10

看一個CSS例子：

-webkit-transform: rotate(45deg);

正如你可以看到你忘了添加度

elem.style.mozTransform = 'rotate(' + deg + 'deg)'; 
elem.style.webkitTransform = 'rotate(' + deg + 'deg)'; 
elem.style.oTransform  = 'rotate(' + deg + 'deg)'; 
elem.style.msTransform  = 'rotate(' + deg + 'deg)'; 
elem.style.transform  = 'rotate(' + deg + 'deg)';

來源

2011-12-13 17:50:12 noob

如何在除IE以外的瀏覽器中的JavaScript中旋轉圖像/ div

回答

相關問題