javascript运动基础 -1之淡入淡出运动效果

javascript运动基础 -1

实现div淡入淡出的效果

<style>
	#div1{
		backgroundColor:red;
		width:200px;
		height:200px;
		//兼容IE8或者更早的版本
		filter:alpha(opacity:30);
		//兼容IE9以上，火狐，谷歌.....
		opacity:0.3;
	}
</style>

<script type="text/javascript">
	window.onload=function(){
		var oDiv=document.getElementById('div1');
		//当鼠标移入时发出的动作
		 oDiv.onmouseover=function(){
			startMove(100);
		}
		//当鼠标移出时，发出的动作
		oDiv.onmouseout=function(){
			startMove(30);
		}
	}
	//定时器框架
	
	//定义模糊的一个变量。
	var alpha=30;
	//定义定时器变量
	var timer=null;
	function startMove(target){
		//提出淡入淡出的速度
		var speed=0;
		var oDiv=document.getElementById('div1');
		//开定时器之前先关闭
		clearInterval(timer);
		//打定时器
		timer=setInterval(function(){
			//判断当前模糊值与目标模糊值是否相等
			if(alpha>target){
				//如果当前大于目标模糊值为负—淡出
				speed=-10;
			}
			//反之淡入
			else{
				speed=10;
			}
			//如果当前模糊值等于目标模糊值，则关闭定时器
			if(alpha==target){
				clearInterval(timer);
			}
			//现在改变的alpha并不是真正的模糊值，我们需要加到样式上去
			else{
				alpha+=speed;
				//兼容IE8或者更早版本的浏览器
				oDiv.style.filter='alpha(opacity='+alpha+')';
				//兼容IE9及以上、火狐、谷歌等浏览器......
				oDiv.style.opacity=alpha/100;
			}
		},30)
	}
</script>

<div id="div1">
</div>