您的位置: 首页 > 技术文档 > 网页制作 > 经典的图片切换效果
用javascript封装的导航菜单 回到列表 表格艺术经典回顾
用户名:
密 码: 忘记密码
注册会员 游客参观 论坛帮助
 经典的图片切换效果

作者:苏小雨 时间: 2006-03-21 文档类型:原创 来自:蓝色理想
浏览统计 total:3847 | year:3847 | Quarter:988 | Month:988 | Week:439 | today:67

css 滤镜 : Pixelate

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 为转换完成。
此特性可用于使用转换滤镜建立静态滤镜效果。设置其值等于定义了转换进程停止的点。使用转换滤镜建立静态滤镜效果可遵循以下步骤:
使用转换滤镜的 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 事件。无返回值。

说明:

这个转换滤镜是一个复杂的视觉效果。在转换的前半段,对象内容先显示为矩形色块拼贴,然后矩形的宽度由一个像素增加至 MaxSquare 属性所设置的值。每个矩形的颜色由其所覆盖区域的像素的颜色平均值决定。接下来的转换的后半段,矩形被还原为新内容具体的图像像素,显示出新的内容。
在使用此转换滤镜前设置此滤镜的 Enabled 特性值为 false 。这将预防在转换发生前彩色拼贴效果的静态滤镜先在对象内容上发生作用。

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

forestgan写的效果如下:

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

经典讨论帖
http://www.blueidea.com/bbs/NewsDetail.asp?id=2500285

出处:蓝色理想
责任编辑:moby

◎进入论坛网页制作网站综合版块参加讨论

相关文章 更多相关链接
div下图片自适应解决方法
新颖实用的显示图片效果
用Flash画钢笔
fireworks绘制星球
实时切换CSS样式
全网 本站 论坛
热门搜索:CSS Fireworks 设计比赛 网页制作 Dreamweaver Studio8 Flash
站点最新 站点最新列表
FLASH AS实现马赛克效果
用AS画图,自定义多边形及圆形
模仿IE自动完成功能
Tag的自定义类
flash缓动效果
firework制作木头效果
JS三级联动选单
UBB,剪贴板,textRange及其他
background-position另类用法
捉鱼LOGO和卡通形象设计大赛
栏目最新 栏目最新列表
FLASH AS实现马赛克效果
用AS画图,自定义多边形及圆形
模仿IE自动完成功能
Tag的自定义类
flash缓动效果
firework制作木头效果
JS三级联动选单
UBB,剪贴板,textRange及其他
background-position另类用法
用FSO操作 xml

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

本文现有 3 条评论 评分:- llllllllllllllllllll + 评分人数: 3 ,平均分: 4.33


jiaking Publish at 2006-3-22 0:41:16 评分5
妙!!真是厉害。收藏之
xwgemini Publish at 2006-3-21 9:09:56 评分5
确实不错~~ 哈哈厉害厉害
cvpc Publish at 2006-3-21 9:04:01 评分3
挺好的,感谢!
您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
《Flash第一步系列》
《交互设计之路》
《Dreamweaver 从基础到实践》
《色彩管理》
《网页设计专家门诊》
《职业之道》设计师的技能书
《Flash MX 2004网站开发精粹》