`

RevealTrans滤镜特效小记

GoHTML 
阅读更多
今天无意发现一个人网站在页面转换之间很眩，所以就顺便看了一下他的页面，顺藤摸瓜，就找到了RevealTrans。既然它这么好玩，那就顺便学习一下，下面我就做一个学习总结。
首先，它的功能是：使用预定义的24种效果之一来展示某物件新的内容。使用方法为：RevealTrans(duration=转换的秒数，transition=转换的类型），那么接下来给你介绍的就是它的24种效果。
css069.gif
它可以用在整个页面上，也可以用在页面的某一个物件上，如果用在页面上只需要在<head></head>之间写一行代码：
<METAhttp-equiv='Page-Exit’CONTENT='RevealTrans(Duration=0.5,Transition=23)'>

即可。在物件上的应用，我从msdn上找到了一个很好的例子，把代码贴在下面：
<html>
<head>
<SCRIPT>
functiongo(){
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>
<INPUTTYPE="BUTTON"VALUE="PlayTransistion"onclick="go();"/>
<SPANID=oSpanSTYLE="position:absolute;Visibility:visible;
Filter:revealTrans(duration=1,transition=0);
width:300;height:300;background-color:lightgreen;">
<CENTERstyle="background-color=red;height=100;width:100;
position:relative;top:100">
</CENTER>
</SPAN>
</body>
</html>
分享到：
| 从底层了解ASP.NET体系结构
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    RevealTrans滤镜的用法

    讲解CSS动态滤镜RevealTrans滤镜的用法，transition参数的参数值有24中，以代号0-23来表示，分别代表24中显示类型

    图片切换类似幻灯片效果 RevealTrans动态滤镜

    实现图片切换类似幻灯片效果, 一共23种切换效果, 代码十分简单明了, 没有多余的干扰代码, 看后马上就能明白怎样使用动态滤镜. 测试环境: Window XP professional sp3, IE 6.0

    RevealTrans

    图形特效 javascript 滤镜效果

    巧用CSS滤镜制作绚丽图片播放效果

    CSS中有revealTrans滤镜在网页中制作特效非常有用处。这次，我们准备介绍另一种使用revealTrans滤镜制作出超弦图片播放的效果。 实现思路：使用revealTrans滤镜制作出超弦图片播放的效果，并每张图片有各自的链接...

    filters.revealTrans.Transition使用方法小结

    下面首先来看下RevealTrans的用法(可以同时打开当鼠标移动到链接，类似幻灯片效果出现提示,移开也一样这个页巩固下). 语法： filter : progid:DXImageTransform.Microsoft.RevealTrans ( enabled=bEnabled , ...

    滤镜使用方法

    alpha，blur，chroma，dropshadow，revealtrans，shadow等方法

    CSS中的Filter样式大全及滤镜兼容问题

    CSS中的Filter样式大全及滤镜兼容问题(本人辛苦搜集)

    IE自带的网页过渡特效

    &lt;meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=0)"&gt; 盒状收缩 &lt;meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=1)"&gt; 盒状展开 ...

    aspx进入退出页面特效

    进入页面&lt;meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)"&gt; 退出页面&lt;meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)"&gt;

    java图片轮显

    在网页适当的位置添加图片，命名，如fz，并设置滤镜效果 &lt;img src="images/7.jpg" name="fz" width="320" height="480" id="fz" revealTrans(duration=2,transition=1 )"&gt; FILTER: revealTrans(duration=4,...

    网页特效从下往上过渡 共享图库_最新图片

    div{ FILTER:revealTrans(transition=4,duration=2); POSITION:absolute; left:0px; top:32px; width:100%; visibility: visible; } 五一欢乐购 棉花 广告设计素材 结婚...

    HTML 网页页面切换的各种变换效果

    META http-equiv=Page-Enter CONTENT=RevealTrans(Duration=4,Transition=n)&gt; 其中,n表示的就是下面的数，n取不同的值，对应有不同的效果： 0、Box in 1、Box out 2、Circle in 3、Circle out 4、Wipe up 5、...

    js动画效果图片切换

    js动画效果图片切换,只需要准备若干幅大小相同的图片，在页面中引用RevealTrans.js,然后把RevealTrans.htm中对应代码粘到页面中你要放图片的地方，代码中图片的路径改成你自己的，是不是很方便呢

    超炫JS代码，如同flash的图片轮换

    focpic.filters.revealTrans.transition=23; } else { focpic.style.visibility = "visible"; focpic.filters[0].transition=23; } focpic.filters[0].Play(); stopit(); } function playnext(){ if...

    JS实现动态移动层及拖动浮层关闭的方法

    本文实例讲述了JS实现动态移动层及拖动浮层关闭的方法。分享给大家供大家参考。具体实现方法如下： &lt;... &lt;head&gt; ...div id="div1" class="yellow" style="VISIBILITY:...filter: revealTrans(transition=12, 'durat

    文字幻灯片

    &lt;!DOCTYPE html PUBLIC “-//W3C//DTD ...&lt;head&gt;&lt;title&gt;.../title&gt;...style type=”text/css”&gt;.trans {filter:revealTrans(Transition=12,Duration=2)}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;s

    js实现的层变换效果

    无标题文档 #div1{ height:200px;... filter:progid:DXImageTransform.Microsoft.RevealTrans(duration=1,transition=12); background:#CCCCCC; } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

    js使用小技巧

    Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type ... 捕获释放 event.srcElement.setCapture();...event.srcElement.releaseCapture();... 根据鼠标获得元素： document....

Magicbox
Global site tag (gtag.js) - Google Analytics