码迷,mamicode.com
首页 > Web开发 > 详细

js 动画3 完美框架

时间:2017-04-13 14:51:01      阅读:266      评论:0      收藏:0      [点我收藏+]

标签:seo   nal   one   put   title   height   cti   XML   als   

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) }

链式动画(前一个动作完毕。后一个动作继续):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>链式框架</title>
<style>
body,ul,li{
	margin:0;
	padding:0;
	}
ul,li{ 
	list-style:none;
}
ul li{
	width:200px;
	height:100px;
	margin-bottom:10px;
	background:yellow;
	border: 4px solid #000;
	filter:alpha(opacity:30);
	opacity: 0.3;
	}
</style>
<script src="move.js"></script>
<script>
window.onload = function(){
	var li = document.getElementById(‘li1‘);
	li.onmouseover = 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>
</head>

<body>
<ul>
	<li id="li1"></li>
</ul>
</body>
</html>



同一时候动画(多个动作同一时候完毕):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>同一时候动画</title>
<style>
body,ul,li{
	margin:0;
	padding:0;
	}
ul,li{ 
	list-style:none;
}
ul li{
	width:200px;
	height:100px;
	margin-bottom:10px;
	background:yellow;
	border: 4px solid #000;
	filter:alpha(opacity:30);
	opacity: 0.3;
	}
</style>
<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>
</head>

<body>
<ul>
	<li id="li1"></li>
</ul>
</body>
</html>



js 动画3 完美框架

标签:seo   nal   one   put   title   height   cti   XML   als   

原文地址:http://www.cnblogs.com/yangykaifa/p/6703335.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!