原生js实现fadein 和 fadeout淡入淡出效果
先来看看设置透明度的兼容性代码：
functionsetOpacity(ele,opacity){
if(ele.style.opacity!=undefined){
///兼容FF和GG和新版本IE
ele.style.opacity=opacity/100;
}else{
///兼容老版本ie
ele.style.filter="alpha(opacity="+opacity+")";
}
}
关于有的小伙伴这样写：
functionsetOpacity(ele,opacity){
if(document.all){
///兼容ie
ele.style.filter="alpha(opacity="+opacity+")";
}
ele{
///兼容FF和GG
ele.style.opacity=opacity/100;
}
}
我想说这样在IE10下运行有问题，点了之后没反应。因为IE10支持opacity属性不支持filter了，这个方法不可取。
fadein函数代码：
functionfadein(ele,opacity,speed){
if(ele){
varv=ele.style.filter.replace("alpha(opacity=","").replace(")","")||ele.style.opacity;
v<1&&(v=v*100);
varcount=speed/1000;
varavg=count<2?(opacity/count):(opacity/count-1);
vartimer=null;
timer=setInterval(function(){
if(v<opacity){
v+=avg;
setOpacity(ele,v);
}else{
clearInterval(timer);
}
},500);
}
}
fadeout函数代码：
functionfadeout(ele,opacity,speed){
if(ele){
varv=ele.style.filter.replace("alpha(opacity=","").replace(")","")||ele.style.opacity||100;
v<1&&(v=v*100);
varcount=speed/1000;
varavg=(100-opacity)/count;
vartimer=null;
timer=setInterval(function(){
if(v-avg>opacity){
v-=avg;
setOpacity(ele,v);
}else{
clearInterval(timer);
}
},500);
}
}
下面给一个demo示例：
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title></title>
<scripttype="text/javascript"src="fade.js"></script>
<scripttype="text/javascript">
window.onload=function(){
document.getElementById('Button1').onclick=function(){
fadeout(document.getElementById('DV'),0,6000);
}
document.getElementById('Button2').onclick=function(){
fadein(document.getElementById('DV'),80,6000);
}
}
</script>
</head>
<body>
<divid="DV"style="background-color:green;width:400px;height:400px;"></div>
<inputid="Button1"type="button"value="button"/>
<inputid="Button2"type="button"value="button"/>
</body>
</html>
有什么更好的实现方式可以留言。。。