Heim  >  Artikel  >  Web-Frontend  >  Einführung in das JS Chain Motion Framework und Beispiele (Code)

Einführung in das JS Chain Motion Framework und Beispiele (Code)

不言
不言Original
2018-09-01 11:47:311306Durchsuche

Der Inhalt dieses Artikels ist eine Einführung (Code) zum js-Chain-Motion-Framework. Er hat einen gewissen Referenzwert. Ich hoffe, er wird für Sie hilfreich sein.

Die zuvor eingeführten Bewegungen sind alle abgeschlossen, nachdem sich ein Objekt bewegt hat, es gibt andere Vorgänge, wie zum Beispiel ein p, das zuerst breiter, dann höher und schließlich transparenter wird Der Bewegungsrahmen erfüllt die Situation nicht. Wir können eine fnEnd-Funktion basierend auf dem Bewegungsframework hinzufügen, um Operationen auszuführen, nachdem die Bewegung abgeschlossen ist.

Kettenbewegungsrahmen

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

Kettenbewegungsbeispiel

Wir verwenden den obigen Kettenbewegungsrahmen, um ein P zu erstellen, das sich zuerst bewegt, um die Breite anzupassen, und sich dann bewegt, um die Höhe anzupassen. und schließlich bewegt sich „Transparenz anpassen“.

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

Verwandte Empfehlungen:

JavaScript Motion Framework Chain Motion to Perfect Motion Beispielcode (5)

Javascript Support Chain Async.Operation_javascript Tipps für das Framework für asynchrone Aufrufe

Das obige ist der detaillierte Inhalt vonEinführung in das JS Chain Motion Framework und Beispiele (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn