javascript实现IE、Firefox兼容的图片渐变功能

欢迎访问我的java技术交流社区资源论坛http://www.javadt.com

该文章转自

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

javascript实现IE、Firefox兼容的图片渐变功能

 

需求：由于某网站需要实现图片播放器功能，图片跳动显示效果不是很好，所以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
代码解释：这里要注意嵌套使用时需要跳出来，如果不是就会出现死循环，if(i==300){return;}；
          i为图片渐变显示的次数，0.025为每次渐变增加的显示度，当i=40时，刚好用了2秒（40*50毫秒），显示度为1，完全不透明显示。

主要代码：
<img src="1.jpg" id="myid" style="filter:blendTrans(Duration=2);">
<script language="javascript">
var img = document.getElementById('myid');
var i=1;
this.go1 = function(){//定义函数
img.style.MozOpacity=i*0.025;//设置透明度

i++;
 if(i==40){
  return;
 }
 setTimeout(function(){this.go1();},50);//1秒后执行函数go
}
</script>

 

4。到目前为止，IE和Firefox可以单独处理，现在只要判断一下客户端使用的是什么浏览器，整合一下就OK了
主要代码：
<img src="1.jpg" id="myid" style="filter:blendTrans(Duration=2);">
<img src="2.jpg" id="myid2" style="filter:blendTrans(Duration=2);">//用于IE和FF的显示对比
<script language="javascript">
var IEFF = navigator.userAgent.indexOf("MSIE")>0? 1: 0; 
var img = document.getElementById('myid');
var img2 = document.getElementById('myid2');
var i=1;

if(IEFF==0){//FF
 this.go1 = function(){//定义函数
  img.style.MozOpacity=i*0.025;
  i++;
  if(i==40){
   return;
  }
  setTimeout(function(){this.go1();},50);
 }
 setTimeout(function(){this.go1();},1);
}else{//IE
 img.filters[0].Apply();
 img.filters[0].Play();
 img2.filters[0].Apply();
 img2.filters[0].Play();
}
</script>

 

5。测试
mark的测试环境：
windows xp;
IE 7.0;
Firefox 8.01

测试中会看到IE中1.jpg和2.jpg都会渐变显示，2秒出来，而在Firefox中，1.jpg会渐变显示，而2.jpg没此效果。

本文由mark编写，转载请注明：转载自ajava.org。

本人水平有限，可能其中有错漏或更好的办法处理，欢迎指正。其他浏览器的图片渐变显示，还需要各位朋友来写，欢迎各位朋友到ajava交流技术、生活点滴。