js 动画3 完美框架
Posted yangykaifa
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js 动画3 完美框架相关的知识,希望对你有一定的参考价值。
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 完美框架的主要内容,如果未能解决你的问题,请参考以下文章