http://javadt.com/forum.php?mod=viewthread&tid=195&extra=

?

需求：由于某网站需要实现图片播放器功能，图片跳动显示效果不是很好，所以mark想如果图片渐变显示，效果应该会不错，所以今天花了一点时间来实现。

?

过程：好久没写过代码了，特别是JS代码，以前也很少写，今天下午搞起来真是头痛，只能找找各位朋友的资料，边学边做，最终还是初步实现。

?

涉及知识点：
1。javascript中滤镜filter使用
2。IE、Firefox兼容问题处理
3。Firefox中如何延时处理

?

问题所在
滤镜filter，在IE 4.0的时候已经开始采用，到5.0后功能越来越多，具体功能请各位朋友自己搜寻一下资料，这里不多说了。滤镜filter主要是在IE使用，这样出现了Firefox里不能使用，所以当mark看到Firefox可以设置图片的透明度时，想到可以通过时间控制来实现渐变效果，这又产生了如何进行时间控制的问题。

?

解决过程：
1。测试IE下滤镜filter的正常使用

a) 在图片中添加滤镜： <img src="1.jpg" id="myid" style="filter:blendTrans(Duration=2);">

代码解释：blendTrans：滤镜中的一种，产生淡入淡出的效果；Duration=2：设置变换时间，如设置2秒，即图片会在2秒内完全显示。

b) 获取图片对象：var img = document.getElementById('myid');；

c)使用显示：img.filters[0].Apply();img.filters[0].Play();
代码解释：filters[0]为获取定义的第一个滤镜，Apply()为转换被应用，Play()开始执行

主要代码：
<img src="1.jpg" id="myid" style="filter:blendTrans(Duration=2);">
<script language="javascript">
var img = document.getElementById('myid');
var i=1;
img.filters[0].Apply();
img.filters[0].Play();
}
</script>

?

2.IE、Firefox兼容问题处理
当你在Firefox里执行上述代码时，会发现图片不会有渐变效果，这时候只有想点办法来模拟了。
a)使用style.MozOpacity来设置图片透明度：
var img = document.getElementById('myid');
img.style.MozOpacity=0.1;
代码解释：style.MozOpacity为Firefox使用的设置样式透明度属性，IE对应的是alpha.opacity；
????????? 0.1为90%的透明，1为0%的透明，即完全不透明。

b)剩下是怎样通过时间控制图片不同透明度显示的问题了。

?

3.Firefox中如何延时处理
a)使用setTimeout(表达式,延时时间)在执行时,是在载入后延迟指定时间后,去执行一次表达式,次数只有一次，延时时间的单位为毫秒。
如：var i=0; setTimeout(function(){i+=1;alert(i);},1000);，这样会每一秒会弹出提示框显示1.2.3....

b)使用setTimeout可以延时处理了，但setTimeout只会执行一次，那表示你只有一次机会，但是现在要模拟动画片显示的效果，怎样实现呢？
这时候mark发现setTimeout时可以嵌套使用的，那就OK了，可以解决的。
定义函数并嵌套使用：
this.go1 = function(){//定义函数
?img.style.MozOpacity=i*0.025;//页面跳转
?i++;
?if(i==40){return;}
?setTimeout(function(){this.go1();},50);//50毫秒后执行函数go1
}
外部调用：setTimeout(function(){this.go1();},1);//1毫秒后执行函数go1
代码解释：这里要注意