試試看...
<a href="javascript:void(0)" onclick="changeit('images/01.jpg')">funciton changeit(img) {
document.photo.filters.alpha.opacity = 0;
document.photo.src=img;
change('photo');
}
<a href="javascript:void(0)" onclick="changeit('images/01.jpg')">funciton changeit(img) {
document.photo.filters.alpha.opacity = 0;
document.photo.src=img;
change('photo');
}
<script language="JavaScript">
<!--
function change(img)
{
img=eval("document.all."+img);
if(img.filters.alpha.opacity>=100)
clearInterval(timer);
else
++img.filters.alpha.opacity;
}
timer=setInterval("change('photo')",50)
function next(img){
if(timer) clearInterval(timer);
document.all.photo.src = img;
document.all.photo.filters.alpha.opacity = 0;
timer=setInterval("change('photo')",50);
}
-->
</script>
<body>
<div id="main">
<div id="left" > <img name="photo" src="http://i3.sinaimg.cn/home/deco/2008/0325/sinahome_Logo.gif" style="height:80px; margin:4px;filter:alpha(opacity=0)" /> </div>
<div id="right" >
<a href="javascript:void(0)" onclick="next('http://www.baidu.com/img/baidu_logo.gif')"> <img src="http://www.baidu.com/img/baidu_logo.gif"/> </a>
<a href="javascript:void(0)" onclick="next('http://img1.qq.com/news/pics/9499/9499744.gif')"> <img src="http://img1.qq.com/news/pics/9499/9499744.gif"/> </a>
</div>
</div>
</body>
语法:
filter : progid:DXImageTransform.Microsoft.Fade ( enabled=bEnabled , duration=fDuration , overlap=fOverlap )
属性:
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false true : 默认值。滤镜激活。
false : 滤镜被禁止。
duration : 可选项。浮点数(Real)。设置或检索转换完成所用的时间。其值为秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 参数设置转换回放的持续时间。然而,当你一旦调用了 play 方法,在回放持续过程中 Duration 特性就变为只读特性。
overlap : 可选项。浮点数(Real)。设置或检索在转换进程中源内容和目标内容都被显示的比例。取值范围为 0.0 - 1.0 。默认值为 1.0 。
假如此属性值设为 0.4 , duration 属性值设为 10 ,则转换会发生下属行为:
前三秒,源对象开始隐出。
随后的四秒,源对象完全隐出,新内容同时隐入。
最后三秒,新内容完全隐入。
特性:
Enabled : 可读写。布尔值(Boolean)。参阅 enabled 属性。
Duration : 可读写。浮点数(Real)。参阅 duration 属性。
Overlap : 可读写。浮点数(Real)。参阅 overlap 属性。
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 事件。无返回值。
说明:
用渐隐效果转换对象内容。示例:
#idDiv{ height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.Fade(duration=2);}