完美运动框架（2） 透明度运动

<script>
	var box = document.getElementById('box');   //盒子1
	var btn1 = document.getElementById('btn1');	//按钮1
	var btn2 = document.getElementById('btn2');	//按钮2
	
	btn1.onclick=function(){
      oPacity(100);
	}
	btn2.onclick=function(){
      oPacity(50);
	}
	
	function oPacity(target){
		
		if(window.timer) clearInterval(window.timer); 	//清除一遍定时器
		var num =Math.round(getStyle(box,'opacity')*100);					//四舍五入
		if(target>num){				//如果目标值大于当前值，那就继续累加到目标值
			var step = 7;			
		}else{						//如果目标值小于当前值，当前值就累减回目标值
			var step=-7;
		}
		timer = setInterval(function(){
			if(num == target){
				clearInterval(timer);
			}else{
				if(Math.abs(target-num)<Math.abs(step)){//如果当前值和目标值相差的距离小于步长的话，当前值就直接跳到目标值
					num=target;								
					box.style.opacity = target/100;	//进行赋值，因为上边获取style属性的时候*100所以这里opacity就要/100
					box.style.filter = 'alpha(opacity=)'+target+')';//不用/，正常值
				}else{	//否则继续累加
					num+=step;
					box.style.opacity = num/100;
					box.style.filter  = 'alpha(opacity=)'+num+')';
				}
			}
		},100)
	}
	function getStyle(oDom,attr){
		if(oDom.currentStyle){
			return parseFloat(oDom.currentStyle[attr]);
		}else{
			return parseFloat(getComputedStyle(oDom,false)[attr]);
		}
	}
</script>