今天无意发现一个人网站在页面转换之间很眩,所以就顺便看了一下他的页面,顺藤摸瓜,就找到了RevealTrans。既然它这么好玩,那就顺便学习一下,下面我就做一个学习总结。
即可。在物件上的应用,我从msdn上找到了一个很好的例子,把代码贴在下面:
首先,它的功能是:使用预定义的
24种效果之一来展示某物件新的内容。使用方法为:
RevealTrans
(duration=
转换的秒数,transition=转换的类型),那么接下来给你介绍的就是它的24种效果。
它可以用在整个页面上,也可以用在页面的某一个物件上,如果用在页面上只需要在<head></head>之间写一行代码:
它可以用在整个页面上,也可以用在页面的某一个物件上,如果用在页面上只需要在<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 >
< 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 >