本篇文章给大家带来的内容是关于js链式运动框架与实例的介绍（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
前面介绍的运动都是一个物体运动之后就结束了，如果一个物体运动之后，还有其他的操作，比如一个p先变宽，然后变高、最后变透明度，我们前面的运动框架就不满足情况了。我们可以在运动框架的基础上，在加上一个fnend函数，当运动执行完成之后执行的操作。
链式运动框架function getstyle(obj,name){ if(obj.currentstyle){ return obj.currentstyle[name]; } else{ return getcomputedstyle(obj,false)[name]; }}function startmove(obj, attr, itarget, fnend) { clearinterval(obj.timer); obj.timer = setinterval(function() { var cur=0; if(attr===opacity){ cur=math.round(parsefloat(getstyle(obj,attr))*100);//有可能会出现误差0.07*100 } else{ cur=parseint(getstyle(obj,attr)); } var speed = (itarget - cur) / 6; speed = speed > 0 ? math.ceil(speed) : math.floor(speed); if (cur === itarget) { clearinterval(obj.timer); if(fnend)fnend();//运动结束后，如果fnend参数传递进去了就执行fnend函数 } else { if(attr===opacity){ obj.style.filter=alpha(opacity:+cur+speed+); obj.style.opacity=(cur+speed)/100; }else{ obj.style[attr]=cur+speed+px; } } }, 30)}
链式运动例子我们用上面的链式运动框架做一个p先运动调整宽度，再运动调整高度，最后 运动调整透明度。
<!doctype html><html> <head> <title>链式运动</title> <script src="move2.js"></script> <style> #p1{ width: 100px; height: 100px; background: red; filter:alpha(opacity:30); opacity:0.3; } </style> <script> window.onload=function(){ var op=document.getelementbyid(p1); op.onmouseover=function(){ startmove(op,width,300,function(){ startmove(op,height,300,function(){ startmove(op,opacity,100); }) }) } op.onmouseout=function(){ startmove(op,opacity,30,function(){ startmove(op,height,100,function(){ startmove(op,width,100); }) }); } } </script> </head> <body> <p id="p1"></p> </body></html>
相关推荐：
javascript运动框架之链式运动到完美运动的示例代码（五）
javascript 支持链式调用的异步调用框架async.operation_javascript技巧
以上就是js链式运动框架与实例的介绍（代码）的详细内容。