js动画效果 | 易学教程

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
	<title>动画效果</title>
</head>
<style type="text/css">
	.odiv{width:200px;height: 100px;background: green;margin-top:20px;border: 5px solid blue;filter:alpha(opacity：30);opacity: 0.3;}
</style>
<body>
<div class="odiv" id="odiv"></div>
<div class="odiv" id="odiv2"></div>
<div class="odiv" id="odiv3"></div>
</body>
<script type="text/javascript">
	window.onload=function(){
		var div=document.getElementById('odiv');
		var divs=document.getElementsByTagName('div');
		for(var i=0;i<divs.length;i++){
			 divs[i].timer=null;
			 
			divs[i].onmouseover=function(){
				move(divs[0],{'opacity':100,'width':400},function(){
					move(divs[0],{'height':300,'width':600})
				})
			}
			divs[i].onmouseout=function(){
				move(divs[0],{'opacity':30,'width':200},function(){
					move(divs[0],{'height':100,'width':200})
				});
		}
		
	}
	function move(obj,json,fn){
	
	clearInterval(obj.timer);
	obj.timer=setInterval(function(){
		var flag=true;
		for(var attr in json){
			var icr=0;
			if(attr=='opacity'){
				icr=Math.round(parseFloat(getstyle(obj,attr))*100);
			}else{
				icr=parseInt(getstyle(obj,attr));
			}
			var sped=(json[attr]-icr)/8;
			sped=sped>0 ? Math.ceil(sped):Math.floor(sped);
			
			if(icr!=json[attr]){
				flag=false;
			}
			if(attr=='opacity'){
					obj.style.filter='alpha(opacity:'+(icr+sped)+')';
					obj.style.opacity=(icr+sped)/100;
				}
			else{
					obj.style[attr]=icr+sped+'px';	
				}
		}
		if(flag){
			clearInterval(obj.timer);
			if(fn){
				fn();
			}
		}
		
		
	},30);
}
//获取不带边框的高
function getstyle(obj,attr){
	if(obj.currentStyle){
		return obj.currentStyle[attr];
	}else{
		return getComputedStyle(obj,false)[attr];
	}
}
}

</script>
</html>
来源：https://www.cnblogs.com/mk2016/p/5410417.html
标签
动画
动漫