欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-10 11:29:22
...
本篇文章给大家带来的内容是关于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链式运动框架与实例的介绍(代码)的详细内容,更多请关注其它相关文章!

相关标签: javascript