当前位置:Gxlcms > JavaScript > js链式运动框架与实例的介绍(代码)

js链式运动框架与实例的介绍(代码)

时间:2021-07-01 10:21:17 帮助过:1人阅读

本篇文章给大家带来的内容是关于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链式运动框架与实例的介绍(代码)的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行