filters.revealTrans.Transition使用方法小结


Posted in Javascript onAugust 19, 2010

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

语法:
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 为转换完成。
此特性可用于使用转换滤镜建立静态滤镜效果。设置其值等于定义了转换进程停止的点。使用转换滤镜建立静态滤镜效果可遵循以下步骤:
使用转换滤镜的 apply 方法。这将捕获对象内容的初始显示,设置 Percent 特性值为 0 。
改变对象内容。如 visibility , innerText , background-color , border ,或者其子对象的属性。
设置转换滤镜的 Percent 特性。即确定你希望的转换进程中某一点。这将捕获到转换进程中在该点处的一张内容图像。
设置转换滤镜的 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 事件。无返回值。

Javascript 相关文章推荐
最短的IE判断代码
Mar 13 Javascript
javascripit实现密码强度检测代码分享
Dec 12 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
基于javascript实现泡泡大冒险网页版小游戏
Mar 23 Javascript
在React中如何优雅的处理事件响应详解
Jul 24 Javascript
详解Js中的模块化是如何实现的
Oct 18 Javascript
javascript数组拍平方法总结
Jan 20 Javascript
vue2.0模拟锚点的实例
Mar 14 Javascript
Vue监听页面刷新和关闭功能
Jun 20 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
Jul 11 Javascript
Vue.js原理分析之nextTick实现详解
Sep 07 Javascript
AngularJS实现多级下拉框
Mar 25 Javascript
JS面向对象编程之对象使用分析
Aug 19 #Javascript
JavaScript中各种编码解码函数的区别和注意事项
Aug 19 #Javascript
jquery插件之easing使用
Aug 19 #Javascript
为Extjs加加速(javascript加速)
Aug 19 #Javascript
原创javascript小游戏实现代码
Aug 19 #Javascript
jQuery与ExtJS之选择实例分析
Aug 19 #Javascript
JQuery跨Iframe选择实现代码
Aug 19 #Javascript
You might like
一个比较简单的PHP 分页分组类
2009/12/10 PHP
简单PHP上传图片、删除图片实现代码
2010/05/12 PHP
PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
php实现简单文件下载的方法
2015/01/30 PHP
PHP  实现等比压缩图片尺寸和大小实例代码
2016/10/08 PHP
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
js读写json文件实例代码
2014/10/21 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
Jquery简单实现GridView行高亮的方法
2015/06/15 Javascript
用JS实现轮播图效果(二)
2016/06/26 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
vue.js实现标签页切换效果
2018/06/07 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
JS实现获取数组中最大值或最小值功能示例
2019/03/02 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
Python语言的12个基础知识点小结
2014/07/10 Python
python3编写C/S网络程序实例教程
2014/08/25 Python
Python编程之属性和方法实例详解
2015/05/19 Python
好用的Python编辑器WingIDE的使用经验总结
2016/08/31 Python
python一行sql太长折成多行并且有多个参数的方法
2018/07/19 Python
python实现祝福弹窗效果
2019/04/07 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
Tensorflow不支持AVX2指令集的解决方法
2020/02/03 Python
如何利用Python写个坦克大战
2020/11/18 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
收集的7个CSS3代码生成工具
2010/04/17 HTML / CSS
linux面试题参考答案(6)
2014/08/29 面试题
党员志愿者活动总结
2014/06/26 职场文书
2015年元旦标语大全
2014/12/09 职场文书
小学推普周活动总结
2015/05/07 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书
alibaba seata服务端具体实现
2022/02/24 Java/Android
详解Golang如何优雅的终止一个服务
2022/03/21 Golang
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS