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. 改变对象内容。如visibility,innerText,background-color,border,或者其子对象的属性。
  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. POJ 1632 Vase collection【状态压缩+搜索】

    题目传送门:http://poj.org/problem?id=1632 Vase collection Time Limit: 1000MS   Memory Limit: 10000K Total ...

  2. jackson简单实用

    ---------------------------------------------------------------------------------------------------- ...

  3. 使用vue搭建项目(创建手脚架)

    第一步:切换到创建的目录 创建项目 vue cerate [model] 第二步:切换到创建好的项目,然后创建element vue add element 第三步:创建router vue add ...

  4. miniMobile(手机)

    官网:http://www.web2014.cn/

  5. 原生ajax、XMLHttpRequest和FetchAPI简单描述

    什么是ajax ajax的出现,刚好解决了传统方法的缺陷.AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个 ...

  6. 【luogu P1402 酒店之王】 题解

    题目链接:https://www.luogu.org/problemnew/show/P1402 菜 #include <queue> #include <cstdio> #i ...

  7. AngularJS 五 过滤器及验证

    AngularJS过滤: AngularJS过滤器允许我们格式化数据以在UI上显示而不改变原始格式. 格式: 一些比较重要的过滤器: Number               Filter       ...

  8. 面向对象编程——class继承

    在上面的章节中我们看到了JavaScript的对象模型是基于原型实现的.特点是简单,缺点是理解起来比传统类-实例模型要困难,最大的缺点是继承的实现需要编写大量代码,并且需要正确实现原型链. 新的关键字 ...

  9. JWT如何在Spring Cloud微服务系统中在服务相互调时传递

    转载请标明出处: http://blog.csdn.net/forezp/article/details/78676036 本文出自方志朋的博客 在微服务系统中,为了保证微服务系统的安全,常常使用jw ...

  10. Python基础—06-函数基础

    函数基础 函数简介 定义:就是具有特定功能的一段代码 优点: 解决代码的重复书写 可以将功能的实现着和使用者分开,提高开发效率 分类: 库函数:print.input.abs等 自定义:用户自己封装的 ...