javascript+css图片切换效果
作者：苏小雨 来源：蓝色理想 发布时间：2007-08-04 20:00:00
内容摘要：图片切换效果在网页制作中经常被使用，好的切换效果不仅增加了网站的实用行也提升了网站的趣味性。而图片切换方法有的使用flash来实现，有的使用javascript实现。本文介绍了使用javascript结合css滤镜来达到图片切换的效果。
这个转换滤镜是一个复杂的视觉效果。在转换的前半段，对象内容先显示为矩形色块拼贴，然后矩形的宽度由一个像素增加至 MaxSquare 属性所设置的值。每个矩形的颜色由其所覆盖区域的像素的颜色平均值决定。接下来的转换的后半段，矩形被还原为新内容具体的图像像素，显示出新的内容。
在使用此转换滤镜前设置此滤镜的 Enabled 特性值为 false 。这将预防在转换发生前彩色拼贴效果的静态滤镜先在对象内容上发生作用。
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 事件。无返回值。
[提示：你可先修改部分代码，再按运行]
forestgan写的效果如下:
[提示：你可先修改部分代码，再按运行]
0
投稿猜你喜欢
- 首先让我们看下 YUI 是如何处理的：var toObject = function(a) { var o = {
上一篇文章 跨表更新，看到自己写的SQL像个憨憨写了关于跨表个更新的内容。一年过的很快，文中后来的两位员工 馮大 和 馮二 也要面对无情的- 我们经常用到的PHP取整函数，主要是：ceil，floor，round，intval。ceil -- 进一法取整说明float ceil (
- 如下所示：希望可以从对admin提交的密码加密，并验证电话号码均为数字。查看admin.pyfrom django.contrib impo
- 目录创建conda环境下载Apple提供的tensorflow支持安装环境前准备工作安装依赖及相关库测试参考资料苹果为M1芯片的Mac提供了
- 采集开始第一步是分析要采集的页面。使用浏览器打开要采集的页面（如:http://sports.sina.com.cn/k/2008-09-1
- 如果你的网站涉及个人隐私或者机密性非公开的网页，怎样告诉禁止搜索引擎收录抓取，下面侯庆龙说下以下方法，希望对不想被搜索引擎收录抓取网站有所帮
- 要将深度学习更快且更便捷地应用于新的问题中，选择一款深度学习工具是必不可少的步骤。 TensorFlow是谷歌于2015年11月9日正式开源
- 使用诸如Lock、RLock、Semphore之类的锁原语时，必须多加小心，锁的错误使用很容易导致死锁或相互竞争。依赖锁的代码应该保证当出现
- 通过 1至10 阶来拟合对比 均方误差及R评分，可以确定最优的“最大阶数”。import numpy as npimport matplot
- 1. 准备工作下载源码包wget http://python.org/ftp/python/2.7.3/Python-2.7.3.tar.b
- MySQL安装分为安装版和解压版，安装版主要是由一个exe程序式安装，有界面鼠标点击安装即可，小白建议使用安装版安装mysql，相比较与安装
- 我们经常使用nodeType==1判断元素是否是一个HMTLElement元素。页面上的元素都是节点(Node)，有元素节点(Element
- IDA插件是经过编译的、功能更强大的IDC脚本，与仅仅使用脚本相比，插件能够执行更加复杂的任务。与编写IDC脚本相比，python显得更为轻
- 一般的多数据库支持在配置文件中如下： <connectionStrings> <add name="MyCmsC
- 前言为了机器人在寻路的过程中避障并且找到最短距离，我们需要使用一些算法进行路径规划（Path Planning），常用的算法有Djikstr
- 1. DID（Differences-in-Differences）定义双重差分法，其主要被用于社会学中的政策效果评估。这种方法需要两个「差
- 最近为了测试网速情况怎么样，由于部分业务服务器需要关闭icmp，这样的话采用普通的ping就无法适应我的需求，于是自己简单的写了一个基于tc
- 1.由于不支持博客首页到文章详情页的跳转，只能打开第一篇文章的详情页2.所以需要做以下工作:设计文章详情页的url，完善视图函数逻辑，实现首
- 4款JavaScript放大镜特效脚本。准确的说，Anythingzoomer和Bezoom才是正宗的放大镜特效，当鼠标悬浮在图片上时，能放
