revealTrans主要有两个参数:Duration和transition.
duration表示持续的时间,而transition表示转换的效果类型.
语法是:object.style.filter="revealTrans(duration=Number,transition=Number)"
除此之外,revealTrans还有三个方法: apply, play和stop,分别为应用转换效果,运行效果和停止效果.
Filter:revealtrans(duration=转换的秒数,transition=转换的类型)
表达式中的transition参数的参数值有24中,以代号0-23来表示,分别代表24中显示类型,具体的参数值列表如下所示:
同时还可以参考一下以下的页面转换特效:
网页变换效果(Trans)共分四大类:
"进入网页"(Page-Enter)、
"离开网页"(Page-Exit)、
"进入站点"(Site-Enter)、
"离开站点"(Site-Exit)。
每一大类又分为25个小类,先用进入网页效果来举例说明:
进入网页时的效果
1.混合效果 代码如下:
<meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)">
2.盒状收缩效果 代码如下:
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=0)">
3.盒状放射效果 代码如下:
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=1)">
4.圆形收缩效果 代码如下:
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=2)">
5.圆形放射效果 代码如下:
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=3)">
6.向上擦除效果 代码如下:
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=4)">
7.向下擦除效果 代码如下:
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=4)">
8.向右擦除效果 代码如下:
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=6)">
9.向左擦除效果 代码如下:
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=7)">
10.垂直遮蔽效果 代码如下:
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=8)">
11.水平遮蔽效果 代码如下:
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=9)">
12.横向棋盘式效果 代码如下:
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=10)">
13.纵向棋盘式效果 代码如下:
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=11)">
14.随即分解效果 代码如下:
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=12)">
15.左右向中央缩进效果 代码如下:
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=13)">
16.中央向左右扩展效果 代码如下:
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=14)">
17.上下向中央缩进效果 代码如下:
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=16)">
18.中央向上下扩展效果 代码如下:
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=17)">
19.从左下抽出效果 代码如下:
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=18)">
20.从左上抽出效果 代码如下:
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=19)">
21.从右下抽出效果 代码如下:
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=20)">
22.从右上抽出效果 代码如下:
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=21)">
23.随机水平线条效果 代码如下:
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=22)">
24.随机垂直线条效果 代码如下:
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=22)">
25.随机效果 代码如下:
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=23)">
<script type="text/javascript"></script>
<!--自定义字段-->
分享到:
相关推荐
讲解CSS动态滤镜RevealTrans滤镜的用法,transition参数的参数值有24中,以代号0-23来表示,分别代表24中显示类型
实现图片切换类似幻灯片效果, 一共23种切换效果, 代码十分简单明了, 没有多余的干扰代码, 看后马上就能明白怎样使用动态滤镜. 测试环境: Window XP professional sp3, IE 6.0
下面首先来看下RevealTrans的用法(可以同时打开当鼠标移动到链接,类似幻灯片效果出现提示,移开也一样这个页巩固下). 语法: filter : progid:DXImageTransform.Microsoft.RevealTrans ( enabled=bEnabled , ...
图形特效 javascript 滤镜效果
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=0)"> 盒状收缩 <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=1)"> 盒状展开 <meta http-equiv=...
CSS中有revealTrans滤镜在网页中制作特效非常有用处。这次,我们准备介绍另一种使用revealTrans滤镜制作出超弦图片播放的效果。 实现思路:使用revealTrans滤镜制作出超弦图片播放的效果,并每张图片有各自的链接...
其中,n表示的就是下面的数,n取不同的值,对应有不同的效果: 0、Box in 1、Box out 2、Circle in 3、Circle out 4、Wipe up 5、Wipe down 6、Wipe right 7、Wipe left 8、Vertical blinds 9、Horizontal blinds 10...
alpha,blur,chroma,dropshadow,revealtrans,shadow等方法
在网页适当的位置添加图片,命名,如fz,并设置滤镜效果 <img src="images/7.jpg" name="fz" width="320" height="480" id="fz" revealTrans(duration=2,transition=1 )"> FILTER: revealTrans(duration=4,...
进入页面<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)"> 退出页面<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)">
CSS中的Filter样式大全及滤镜兼容问题(本人辛苦搜集)
无标题文档 #div1{ height:200px;... filter:progid:DXImageTransform.Microsoft.RevealTrans(duration=1,transition=12); background:#CCCCCC; } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
js动画效果图片切换,只需要准备若干幅大小相同的图片,在页面中引用RevealTrans.js,然后把RevealTrans.htm中对应代码粘到页面中你要放图片的地方,代码中图片的路径改成你自己的,是不是很方便呢
s += " 网页可见区域高:"+ document.body.offsetWeight +" (包括边线的宽)"; s += " 网页可见区域高:"+ document.body.offsetHeight +" (包括边线的宽)"; s += " 网页正文全文宽:"+ document.body.scrollWidth;...
div{ FILTER:revealTrans(transition=4,duration=2); POSITION:absolute; left:0px; top:32px; width:100%; visibility: visible; } 五一欢乐购 棉花 广告设计素材 结婚...
动态的链接提示 .article { BACKGROUND-COLOR: #ffcc00;... FILTER: revealTrans(transition=23,duration=0.5) blendTrans(duration=0.5); PADDING-BOTTOM: 3px; PADDING-LEFT: 3px; PADDING-RIGHT: 3p
本文实例讲述了JS实现动态移动层及拖动浮层关闭的方法。分享给大家供大家参考。具体实现方法如下: <html> <head> <title>动态移动的层</title> <body bgcolor="#ADBAC9"> <div ...
<!DOCTYPE html PUBLIC “-//W3C//DTD ...<head><title>.../title>...style type=”text/css”>.trans {filter:revealTrans(Transition=12,Duration=2)}</style></head><body><s