在IE 7+上貓頭鷹旋轉木馬淡化轉換

我使用神話般的貓頭鷹旋轉木馬爲我的網站和更具體的「淡入淡出」效果。你可以在這裏看到一個演示：http://www.owlgraphic.com/owlcarousel/demos/transitions.html 在IE 7+上貓頭鷹旋轉木馬淡化轉換

我的傳送帶圖片「淡入淡出」在Chrome瀏覽器上很好，但在IE瀏覽器上，他們「幻燈片」，而不是。在官方網站上，它是說：

「！重要CSS3過渡只能在支持CSS3 方法translate3d，只在屏幕上顯示單個項目的現代瀏覽器。」

於是，我找了一個黑客，發現這個：

#monElement { 
opacity: .4; /* for all modern webcrawlers */ 
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* For IE6, IE7, and IE8 */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* IE8 only */ 
}

但是......這也不起作用。想法是什麼？

謝謝

來源

2014-04-03 patefilo

這不是一個關於Web本體語言的問題，不應該被標記爲[標籤：貓頭鷹。 –

使用DXImageTransform實現對IE7 + 8這樣的效果（從9不建議使用）需要一些JavaScript也。 MS Technet visual filters and transitions reference提供瞭如何實現這個的例子。顯然，這些例子只能在IE 7或8

工作例如：

<script> 
var bToggle = 0; 
function fnToggle() { 
    oDiv.filters[0].Apply();     

    // After setting Apply, changes to the oDiv object 
    // are not displayed until Play is called. 
    if (bToggle) {               
     bToggle = 0; 
     oDiv.style.backgroundColor="gold";} 
    else { 
     bToggle = 1; 
     oDiv.style.backgroundColor="blue";} 
    oDiv.filters[0].Play(); 
} 
</script> 

<button onclick="fnToggle()">Toggle Transition</button><br/><br/> 

<div id="oDiv" style="height:250px; width:250px; background-color: gold; 
       filter:progid:DXImageTransform.Microsoft.Fade( 
       duration=2);"> 
</div>

來源

2014-04-03 18:47:34 fzzylogic

在IE 7+上貓頭鷹旋轉木馬淡化轉換

回答

相關問題