现在的位置: 首页 > 综合 > 正文

RevealTrans滤镜特效小记

2012年11月03日 ⁄ 综合 ⁄ 共 1133字 ⁄ 字号 评论关闭

    今天无意发现一个人网站在页面转换之间很眩,所以就顺便看了一下他的页面,顺藤摸瓜,就找到了RevealTrans。既然它这么好玩,那就顺便学习一下,下面我就做一个学习总结。

    首先,它的功能是:使用预定义的24种效果之一来展示某物件新的内容。使用方法为:RevealTrans (duration=转换的秒数,transition=转换的类型),那么接下来给你介绍的就是它的24种效果。
                    css069.gif

它可以用在整个页面上,也可以用在页面的某一个物件上,如果用在页面上只需要在<head></head>之间写一行代码:

<META http-equiv='Page-Exit’ CONTENT='RevealTrans(Duration=0.5,Transition=23)'>

即可。在物件上的应用,我从msdn上找到了一个很好的例子,把代码贴在下面:

<html>
<head>
<SCRIPT>
function go() {
    oSpan.filters[
0].Apply();
    
if (oSpan.style.visibility == "visible"{
        oSpan.style.visibility 
= "hidden";
                oSpan.filters.revealTrans.transition
=0;
    }

    
else {
        oSpan.style.visibility 
= "visible";
                oSpan.filters[
0].transition=1;
    }

    oSpan.filters[
0].Play();
}

</SCRIPT>
</head>
<body>
<INPUT TYPE="BUTTON" VALUE="Play Transistion" onclick="go();" />
<SPAN  ID=oSpan STYLE="position:absolute; Visibility:visible;
        Filter:revealTrans(duration=1, transition=0);
        width:300; height:300; background-color: lightgreen;"
>
    
<CENTER style="background-color=red; height=100; width:100;
            position:relative; top:100"
>
    
</CENTER>
</SPAN>
</body>
</html>

抱歉!评论已关闭.