RevealTrans滤镜特效小记
今天无意发现一个人网站在页面转换之间很眩,所以就顺便看了一下他的页面,顺藤摸瓜,就找到了RevealTrans。既然它这么好玩,那就顺便学习一下,下面我就做一个学习总结。
首先,它的功能是:使用预定义的24种效果之一来展示某物件新的内容。使用方法为:RevealTrans (duration=转换的秒数,transition=转换的类型),那么接下来给你介绍的就是它的24种效果。
<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>
<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>