Question

我在我的网站上使用神话般的猫头鹰旋转木马，更具体地说是＆＃34; fade＆＃34;影响。您可以在此处查看演示：http://www.owlgraphic.com/owlcarousel/demos/transitions.html

我的旋转木马的图片＆＃34;淡出＆＃34;在Chrome上很好，但在IE上，他们可以滑动＆＃34;代替。在官方网站上，有人说：

＆＃34;重要！ CSS3过渡仅适用于支持的现代浏览器 CSS3 translate3d方法，只有屏幕上的单项。＆＃34;

因此，我找了一个黑客，发现了这个：

#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 */
}

但是......它也不起作用。了解它可能是什么？

谢谢

Answer 1

使用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>

猫头鹰旋转木马在IE 7+上淡出过渡

1 个答案: