js 动画3 完美框架

页面导航:首页 > 网络编程 > JavaScript > js 动画3 完美框架

js 动画3 完美框架

来源: 作者: 时间:2016-01-22 08:39 【

js 框架:function getStyle(obj,attr){if(obj currentStyle){return obj currentStyle[attr];}else{return getComputedStyle(obj,false)[attr];}}function startMove(obj,json,fn){var flag
js 框架:
function getStyle(obj,attr){
	if(obj.currentStyle){
		return obj.currentStyle[attr];
	}
	else{
		return getComputedStyle(obj,false)[attr];
	}
}

function startMove(obj,json,fn){
	var flag = true;//假设
	clearInterval(obj.timer);
	obj.timer = setInterval(function(){
		for(var attr in json)
		{
			//取当前值
			var icur = 0;
			if(attr == 'opacity'){
				icur = Math.round(parseFloat(getStyle(obj,attr))*100);
			}
			else{
				icur = parseInt(getStyle(obj,attr))
			}
			//算速度
			var speed = (json[attr]-icur)/8;
			speed = speed >0?Math.ceil(speed):Math.floor(speed);
			//检测停止
			if(icur != json[attr]){
				flag = false;
			}
			if(attr == 'opacity'){
				obj.style.filter = 'alpha(opacity:'+(icur +speed)+')';
				obj.style.opacity = (icur + speed)/100;
			}
			else{
					obj.style[attr] = icur + speed + 'px';
			}
		}
		if(flag){
			clearInterval(obj.timer);
			if(fn){
				fn();
			}
		}
	},30)
}

链式动画(前一个动作完成,后一个动作继续):

 





<script src=move.js></script><script>
window.onload = function(){
var li = document.getElementById('li1');
li.onmouver = function(){
startMove(li,'width',400,function(){
startMove(li,'height',200,function(){
startMove(li,'opacity',100);
});
});
}
li.onmouseout = function(){
startMove(li,'opacity',30,function(){
startMove(li,'height',100,function(){
startMove(li,'width',200);
});
});
}
}
</script>
  •  


 


同时动画(多个动作同时完成):

 

 





<script src=move.js></script><script>
window.onload = function(){
var oli = document.getElementById('li1');
oli.onmouseover = function(){
startMove(oli,{width:400,height:200,opacity:100});
}
oli.onmouseout = function(){
startMove(oli,{width:200,height:100,opacity:30});
}
}
</script>
  •  
  •  
  •  


 


 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<