js链式运动框架与实例的介绍（代码）

来源：哈瑞养生

本篇文章给大家带来的内容是关于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>