`
dyclh
  • 浏览: 50899 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

关于filters.revealTrans.transition的用法

阅读更多

有看到幻灯片调用会用到divid.filters.revealTrans.Transition=Math.floor(Math.random()*23)和divid.filters.revealTrans.apply(),那么这两个都是什么意思呢?下面首先来看下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 事件。无返回值。

说明:

分享到:
评论

相关推荐

    filters.revealTrans.Transition使用方法小结

    在网页设计和开发中,`filters.revealTrans.Transition` 是一种旧的、基于滤镜(Filter)技术的动画效果,主要用于Internet Explorer浏览器。这种技术主要用于实现过渡效果,比如幻灯片展示。在标题和描述中提到的 `...

    js+css 滤镜 切换图片

    这个值被用来设置`<img>`标签的`filters.revealTrans.Transition`属性,从而实现随机的滤镜效果。最后通过`apply()`和`play()`方法应用并播放滤镜效果。 3. **CSS滤镜效果定义**:虽然示例代码中没有明确写出CSS...

    jsp图片切换代码

    虽然代码示例展示了在JSP环境中实现图片切换的基本框架,但考虑到不同浏览器的兼容性问题,尤其是`filters.revealTrans`仅在IE浏览器中有效,开发人员在实际项目中应考虑使用更现代的技术,如CSS3的`transition`和`...

    JS图片轮换

    with (this._img.filters.revealTrans) { Transition = this.Transition; Duration = this.Duration; apply(); play(); } } this._img.style.visibility = ""; this._img.src = list.img; this._img.alt =...

    用一段js程序来实现动画功能

    - 使用IE特有的`filters.revealTrans`属性实现图片过渡动画。 #### 五、总结 通过上述示例可以看出,使用JavaScript编写网页动画不仅能够满足基本的动画需求,还能提供更灵活的定制化选项。此外,这种做法还具有...

    网页制作滤镜代码文档

    然后,使用`innerText`属性更改层的内容,并通过`filters`属性访问滤镜,调用`apply()`方法应用滤镜,接着调用`play()`方法启动过渡效果。为了实现自动切换,还使用了`setTimeout`函数设置定时器,确保每个文字效果...

    js实现的层变换效果

    3. **跨浏览器支持**:考虑到不同浏览器之间的差异,建议使用更加健壮的解决方案,例如jQuery等库提供的动画方法,这些方法通常已经处理了浏览器兼容性问题。 通过以上步骤,我们成功实现了基于JavaScript的简单层...

    图片之间的切换

    `playTran()`函数是用于启动图片过渡效果的,如果浏览器支持滤镜(如IE),它会调用图片的`filters.revealTrans.play()`方法来播放过渡动画。 `nextAd()`函数是图片切换的核心,它会递增`adNum`的值,实现向后切换...

    非常漂亮网页常用效果js

    通过`FILTER:revealTrans(Duration=4.0, Transition=23)`属性和`filters.item(0).play(2.0)`方法,可以控制图片的透明度变化和动画效果。 7. **自定义弹窗**:JavaScript可以创建自定义的弹窗,如设置弹窗的链接、...

    js实现随即图片切换效果

    在现代Web开发中,通常会使用CSS动画或transition来替代这些方法,以确保代码的兼容性和可维护性。 #### 总结 通过以上步骤,我们可以实现一个基本的随机图片切换效果。为了使代码更加健壮和易于维护,建议采用...

    VBscript超强幻灯片效果代码

    本文将详细介绍一篇关于使用VBScript实现幻灯片效果的文章。文章中的示例代码利用了VBScript的强大功能,在网页上实现了幻灯片的切换效果。不同于常见的JavaScript幻灯片制作方法,此段代码为读者提供了另一种实现...

    js使用小技巧

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

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

    3. **插入图片并设置滤镜**:在页面中插入图片,并在`<img>`标签中添加`style`属性,设置`FILTER: revealTrans(Duration=2, Transition=23)`。这里的`Duration`参数表示过渡动画的持续时间,单位为秒;`Transition`...

Global site tag (gtag.js) - Google Analytics