Introduction to js chain motion framework and examples (code)-JS Tutorial-php.cn

Introduction to js chain motion framework and examples (code)

不言

Release： 2018-09-01 11:47:31

Original

1330 people have browsed it

This article brings you an introduction (code) about the js chain motion framework and examples. It has a certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The movements introduced before are all finished after an object moves. If an object moves, there are other operations, such as a p that first becomes wider, then becomes taller, and finally becomes more transparent. What we did earlier The motion frame does not satisfy the situation. We can add a fnEnd function based on the motion framework to perform operations after the motion is completed.

Chain motion frame

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)
}

Copy after login

Chain motion example

We use the above chain motion frame to make a p that first moves to adjust the width, then moves to adjust the height, and finally moves Adjust transparency.

<!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>

Copy after login

Related recommendations:

JavaScript motion framework chain motion to perfect motion sample code (5)

javascript supports chain Asynchronous calling framework Async.Operation_javascript tips for style calling

The above is the detailed content of Introduction to js chain motion framework and examples (code). For more information, please follow other related articles on the PHP Chinese website!