js链式运动框架与实例的介绍（代码）-js教程-PHP中文网

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

不言

发布： 2018-09-01 11:47:31

原创

1454人浏览过

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

登录后复制