在上一个运动框架中,有一个运动无法实现,那就是淡入淡出效果的一个这样的运动
原因有很多,最明显的就是首先,淡入淡出的兼容alpha(非IE浏览器)存在小数点0.3而淡入淡出不存在以及设置style(样式)存在px,而淡入淡出并没有,下面直接看一个比较完整 的运动框架
<style>
#div1{
width:200px;
height:200px;
backgourndColor:yellow;
filter:alpha(opacity:30);
opacity:0.3;
}
</style>
<script type="text/javascript">
//取非行间样式
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}
else{
return computedStyle(obj,false)[name];
}
}
//运动框架
function(obj,arrt,target){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var curr=0;
//如果arrt为opacity
if(arrt=='opacity'){
//Math.round表示四舍五入,因为存在小数
curr=Math.round(parsentFloat(getStyle(obj,arrt)))*100;
}
else{
curr=parsInt(getSty(obj,arrt));
}
var speed=(target-curr)/6;
speed=speed>0?Math.ceil(speed):Math.floor(spoeed);
if(curr==target){
clearInterval(obj.timer);
}
else{
if(arrt==opacity)
{
//设置样式
obj,style.filter:'alpha(opacity:'+(curr+speed)+')';
obj.style.opacity:(alpha/100);
}
else{
obj.style[arrt]=obj.curr+speed+'px';
}
}
},30)
}
</script>
<div id="div1">
</div>