Learn to use filter to display content-优快云博客

本文介绍了一种滤镜转换方法，包括apply、play和stop三个关键步骤。通过实例展示了如何使用JavaScript控制滤镜效果的切换，如Strips、Barn和Fade等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Discription:

apply

捕获对象内容的初始显示，为转换做必要的准备。无返回值。
当此方法一旦被调用后，对象属性的任何改变都不会被显示，直到你调用 play 方法开始转换。
请注意：你只能使用 visibility 属性来改变对象的子对象。否则，对子对象的直接改变会被立即显示出来，而不会被转换滤镜捕获。
当你调用 play 方法时，转换呈现出内容的变化结果(对象的属性和子对象的 visibility 属性的改变)。

play ( iDuration )

开始转换。无返回值。参数见下表。

iDuration

可选项。浮点数(Real)。指定滤镜作用持续的时间。默认单位为秒。
使用 play 方法的 iDuration 参数设置转换回放的持续时间，其值在转换的当前一个周期内会替换 Duration 属性的设置。但是下一次转换会恢复使用 Duration 属性设置的值。

stop

停止转换回放。并呈现转换结果图像。同时激发 onfilterchange 事件。无返回值。

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <link href="Stylesheet1.css" rel="stylesheet" type="text/css" />
    <script language="javascript" type="text/javascript">
        var oParentDiv,oCodeDiv;
        var currentIndex =0;
        var arr = new Array('progid:DXImageTransform.Microsoft.Strips(duration=3);'
                           ,'progid:DXImageTransform.Microsoft.Barn(function=20, duration=7);'
                           ,'progid:DXImageTransform.Microsoft.Fade(duration=2);');

        function rdl_doInit(e){
            oParentDiv=document.all("idParentDiv");
            oCodeDiv=document.all("idCodeDiv");
            setInterval(rdl_play,3000);
        }

        function rdl_play(){
            if(currentIndex >= arr.length)
            {
                currentIndex = 0;
            }
            oParentDiv.style.filter = arr[currentIndex];
            currentIndex++;

            with (oParentDiv) {
                if (children[0].style.visibility=="hidden")
                    children[1].style.visibility="visible";
                else
                    children[1].style.visibility="hidden";


                filters[0].Apply();
                if (children[0].style.visibility=="hidden")
                    children[0].style.visibility="visible";
                else
                    children[0].style.visibility="hidden";
                if (children[1].style.visibility=="hidden")
                    children[1].style.visibility="visible";
                else
                    children[1].style.visibility="hidden";
                filters[0].play();
            }
        }
        window.onload=rdl_doInit;
</script>

</head>
<body>
    <form id="form1" runat="server">
        <div id="idParentDiv">
            <div id="idDiv1"><img src="Images/c.GIF" >我是合成滤镜获取的输入<b> A </b>。</div>
            <div id="idDiv2"><img src="Images/d.Gif">我是合成滤镜获取的输入<b> B </b>。</div>
        </div>
        <input type="button" value=" Play " onclick="if (oParentDiv!=null) rdl_play();" />
        <input type="button" value=" Stop " onclick="if (oParentDiv!=null) oParentDiv.filters[0].stop();" />
    </form>
</body>
</html>