登录 注册

filter效果之马赛克

资讯 驱动中国 若水 3,381 次阅读 0 条评论
分享 微 Q 信
Pixelate兼容性：IE5.5+
语法：
filter : progid:DXImageTransform.Microsoft.Pixelate ( enabled=bEnabled , duration=fDuration , maxSquare=iWidth )
属性：
enabled :? 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
true :? 默认值。滤镜激活。
false :? 滤镜被禁止。
duration :? 可选项。浮点数(Real)。设置或检索转换完成所用的时间。其值为秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 参数设置转换回放的持续时间。然而，当你一旦调用了 play 方法，在回放持续过程中 Duration 特性就变为只读特性。
maxSquare :? 可选项。整数值(Integer)。设置或检索转换中矩形色块的最大宽度。取值范围为 2 - 50 。默认值为 50 。
特性：
Enabled :? 可读写。布尔值(Boolean)。参阅 enabled 属性。
Duration :? 可读写。浮点数(Real)。参阅 duration 属性。
MaxSquare :? 可读写。整数值(Integer)。参阅 maxSquare 属性。
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)。
#p#分页标题#e#
方法：
apply :? 捕获对象内容的初始显示，为转换做必要的准备。无返回值。
当此方法一旦被调用后，对象属性的任何改变都不会被显示，直到你调用 play 方法开始转换。
请注意：你只能使用 visibility 属性来改变对象的子对象。否则，对子对象的直接改变会被立即显示出来，而不会被转换滤镜捕获。
当你调用 play 方法时，转换呈现出内容的变化结果(对象的属性和子对象的 visibility 属性的改变)。
play ( iDuration ) :? 开始转换。无返回值。参数见下表。
iDuration :? 可选项。浮点数(Real)。 指定滤镜作用持续的时间。默认单位为秒。
使用 play 方法的 iDuration 参数设置转换回放的持续时间，其值在转换的当前一个周期内会替换 Duration 属性的设置。但是下一次转换会恢复使用 Duration 属性设置的值。
stop :? 停止转换回放。并呈现转换结果图像。同时激发 onfilterchange 事件。无返回值。
说明：
这个转换滤镜是一个复杂的视觉效果。在转换的前半段，对象内容先显示为矩形色块拼贴，然后矩形的宽度由一个像素增加至 MaxSquare 属性所设置的值。每个矩形的颜色由其所覆盖区域的像素的颜色平均值决定。接下来的转换的后半段，矩形被还原为新内容具体的图像像素，显示出新的内容。
在使用此转换滤镜前设置此滤镜的 Enabled 特性值为 false 。这将预防在转换发生前彩色拼贴效果的静态滤镜先在对象内容上发生作用。
示例：
#idDiv{ height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.Pixelate(duration=3, enabled='false');}
效果 转换 滤镜 对象 设置 属性 使用 内容 特性 方法
版权声明:本文由驱动中国整理发布,转载需注明出处与原文链接。如有疑问请联系 editor@qudong.com。
本文价值 ★★★★★ — 成为第一个评分的人
登录后为本文打分
网友评论0 条评论
正在回复 的评论取消
评论加载中…
🔐

登录后参与互动

评论、点赞均可赚积分
连续签到、邀请好友也有奖励 🎁

电脑端: 微信扫码登录 微信内: 一键登录

微信扫一扫

打开微信「扫一扫」,分享本文到朋友圈或好友