RevealTrans

更新时间:2013-06-01 17:11:59 |
RevealTrans兼容性:IE5.5+

语法:

filter : progid:DXImageTransform.Microsoft.RevealTrans ( enabled=bEnabled, duration=fDuration, transition=iTransitionType)

属性:

enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true|false

true : 默认值。滤镜激活。
false : 滤镜被禁止。
duration : 可选项。浮点数(Real)。设置或检索转换完成所用的时间。其值为秒.毫秒(0.0000)格式。
你可以使用play方法的iDuration参数设置转换回放的持续时间。然而,当你一旦调用了play方法,在回放持续过程中Duration特性就变为只读特性。
transition : 可选项。整数值(Integer)。设置或检索转换所使用的方式。

0 : 矩形收缩转换。
1 : 矩形扩张转换。
2 : 圆形收缩转换。
3 : 圆形扩张转换。
4 : 向上擦除。
5 : 向下擦除。
6 : 向右擦除。
7 : 向左擦除。
8 : 纵向百叶窗转换。
9 : 横向百叶窗转换。
10 : 国际象棋棋盘横向转换。
11 : 国际象棋棋盘纵向转换。
12 : 随机杂点干扰转换。
13 : 左右关门效果转换。
14 : 左右开门效果转换。
15 : 上下关门效果转换。
16 : 上下开门效果转换。
17 : 从右上角到左下角的锯齿边覆盖效果转换。
18 : 从右下角到左上角的锯齿边覆盖效果转换。
19 : 从左上角到右下角的锯齿边覆盖效果转换。
20 : 从左下角到右上角的锯齿边覆盖效果转换。
21 : 随机横线条转换。
22 : 随机竖线条转换。
23 : 随机使用上面可能的值转换。

特性:

Enabled : 可读写。布尔值(Boolean)。参阅enabled属性。
Duration : 可读写。浮点数(Real)。参阅duration属性。
Transition : 可读写。整数值(Integer)。参阅transition属性。
Percent : 可读写。字符串(String)。设置或检索当前静态滤镜输出在转换进程中所处的点。取值范围为0 - 100。默认值为0,转换尚未开始。100为转换完成。
此特性可用于使用转换滤镜建立静态滤镜效果。设置其值等于定义了转换进程停止的点。使用转换滤镜建立静态滤镜效果可遵循以下步骤:
  1. 使用转换滤镜的apply方法。这将捕获对象内容的初始显示,设置Percent特性值为0
  2. 改变对象内容。如visibilityinnerTextbackground-colorborder,或者其子对象的属性。
  3. 设置转换滤镜的Percent特性。即确定你希望的转换进程中某一点。这将捕获到转换进程中在该点处的一张内容图像。
  4. 设置转换滤镜的Enabled特性值为true。则滤镜作用的对象将依据获取到的图像更新其内容。

请注意:你只能使用visibility属性来改变对象的子对象。否则,对子对象的直接改变会被立即显示出来,而不会被转换滤镜捕获。

status : 只读。整数值(Integer)。检索转换的当前状态。0|1|2

0 : 转换停止(stop)。
1 : 转换被应用(apply)。
2 : 转换在进行(play)。

方法:

apply : 捕获对象内容的初始显示,为转换做必要的准备。无返回值。
当此方法一旦被调用后,对象属性的任何改变都不会被显示,直到你调用play方法开始转换。
请注意:你只能使用visibility属性来改变对象的子对象。否则,对子对象的直接改变会被立即显示出来,而不会被转换滤镜捕获。
当你调用play方法时,转换呈现出内容的变化结果(对象的属性和子对象的visibility属性的改变)。
play (iDuration) : 开始转换。无返回值。参数见下表。

iDuration : 可选项。浮点数(Real)。 指定滤镜作用持续的时间。默认单位为秒。
使用play方法的iDuration参数设置转换回放的持续时间,其值在转换的当前一个周期内会替换Duration属性的设置。但是下一次转换会恢复使用Duration属性设置的值。
stop : 停止转换回放。并呈现转换结果图像。同时激发onfilterchange事件。无返回值。

说明:

提供了24种转换对象内容的效果。

示例:

#goodxyxDiv{ height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.RevealTrans(duration=5, transition=2); }
应用于:
IE4.0+ TABLETDTEXTAREATHSPANstyleINPUT type=buttonINPUT type=checkboxINPUT type=fileINPUT type=imageINPUT type=passwordINPUT type=radioINPUT type=resetINPUT type=submitINPUT type=textMARQUEEBODYBUTTONIMGDIV
IE5.0+ runtimeStyle
IE5.5+ AACRONYMADDRESSBBDOBIGBLOCKQUOTECAPTIONCENTERCITECODECUSTOMDDDELDFNDIRDLDTEMFIELDSETFONTFORMFRAMEHnIIFRAMEINSKBDLABELLEGENDLIMENUNOBROBJECTOLPPLAINTEXTPREQRTRUBYSSAMPSMALLSTRIKESTRONGSUBSUPTTUULVARXMP

RevealTrans图片切换效果的更多相关文章

  1. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  2. 精致3D图片切换效果,最适合企业产品展示

    这是一个精致的立体图片切换效果,特别适合企业产品展示,可立即用于实际项目中.支持导航和自动播放功能, 基于 CSS3 实现,推荐使用最新的 Chrome,Firefox 和 Safari 浏览器浏览效 ...

  3. jquery简单的图片切换效果,支持pc端、移动端的banner图片切换开发

    详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...

  4. 100种不同图片切换效果插件pageSwitch

    分享100种不同图片切换效果插件pageSwitch.这是一款适用于全屏切换场景,即一切一屏,并且实现了超过一百种切换效果,支持自定义切页动画.效果图如下: 在线预览   源码下载 实现的代码. ht ...

  5. Flash 用FLASH遮罩效果做图片切换效果

    本教程是关于FLASH应用遮罩效果制作好看的图片切换效果.该教程选用FLASH遮罩中最简单的一种作为例子,当然你可以用自己的想象力来做出更多更好的图片动画.希望本教程能带你带来帮助. 让我们先看看效果 ...

  6. 10款好用的 jQuery 图片切换效果插件

    jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...

  7. js原生带缩略图的图片切换效果

    js原生带缩略图的图片切换效果 本例中用到的 moveElement(elementID,final_x,final_y,interval)是来自<JavaScript DOM编程艺术(中文第二 ...

  8. jquery带按钮的图片切换效果

    <!doctype html> <html> <head> <meta charset="gb2312"> <title> ...

  9. javascript马赛克遮罩图片切换效果:XMosaic.js(转)

    新鲜出炉的javascript图片切换特效,实现的是马赛克遮罩切换.在flash里,好实现遮罩动画很简单,不过JS实现起来就有些困难了. XMosaic.js,与XScroll.js和XScroll2 ...

随机推荐

  1. caffe卷积层实现

    下图是jiayangqing在知乎上的回答,其实过程就是把image转换成矩阵,然后进行矩阵运算 卷积的实现在conv_layer层,conv_layer层继承了base_conv_layer层,ba ...

  2. out 和ref 的区别

    练习 1: 练习 2: 练习 3:

  3. ueditor1.2.6图片被压缩的解决办法

    修改文件路径: ueditor\dialogs\image\image.html 修改数值:

  4. Question 20171117 Java中的编码问题?

    撰文缘由 前几天做一个邮件发送功能,一些常用信息配置在properties文件中,通过prop.getProperty(key)来获取配置的信息,结果配置文件中是用中文写的,邮件发送成功后,邮箱中的激 ...

  5. iOS Xcode 小技巧,提升理解查询能力,Command + 点击鼠标右键 Jump to Definition等

    前言: 介绍下Xcode 小技巧,以及一下快捷键,让你调试程序更加出类拔萃,安排! Command + 点击鼠标右键 Jump to Definition,可能你平时也在用,但是你明白全部的用法吗,试 ...

  6. js函数只触发一次

    如何让js中的函数只被执行一次?我们有时候会有这种需求,即让一个函数只执行一次,第二次调用不会返回任何有价值的值,也不会报错.下面将通过三个小demo展示使用的方法,当做个人笔记. 1.通过闭包来实现 ...

  7. P3818 小A和uim之大逃离 II(bfs,有条件的广搜)

    题目背景 话说上回……还是参见 https://www.luogu.org/problem/show?pid=1373 吧 小a和uim再次来到雨林中探险.突然一阵南风吹来,一片乌云从南部天边急涌过来 ...

  8. 并查集(union-find sets)

    一.并查集及其优化 - 并查集:由若干不相交集合组成,是一种简单但是很好用的数据结构,拥有优越的时空复杂性,一般用于处理一些不相交集合的查询和合并问题. - 三种操作: 1.Make_Set(x) 初 ...

  9. 在CentOS 7上搭建Docker环境

      Preface       We commonly use VMware or VirtualBox to install our Virtual Machines before.For the ...

  10. 快速玩转linux(3)

    Linux常用命令 软件操作命令 执行操作 命令 软件包管理器 yum 安装软件 yum install xxx 卸载软件 yum remove xxx 搜索软件 yum search xxx 清除缓 ...