js 动画3 完美框架

来源：互联网发布：25端口是什么编辑：程序博客网时间：2024/06/10 10:06

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>

1 0