Heim > Artikel > Web-Frontend > Kettenbewegung in JS (ausführliches Tutorial)

Kettenbewegung in JS (ausführliches Tutorial)

亚连Original: 2018-06-09 16:15:391527Durchsuche

In diesem Artikel wird hauptsächlich die Kettenbewegung von JS-Motion-Spezialeffekten vorgestellt und die Prinzipien und spezifischen Implementierungstechniken von Javascript-Kettenbewegungen in Form von Beispielen analysiert.

Die Beispiele von Dieser Artikel beschreibt JS Chain-Bewegungs- und Bewegungsspezialeffekte. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Folgen Sie dem vorherigen Artikel „Methoden zum Hinzufügen von Bewegung mit beliebigem Wert in JS Motion-Spezialeffekten“ und werfen Sie weiter

Kettenbewegung: Eine Bewegung nach der anderen. Beispiel: Wenn die Maus nach p bewegt wird, wird zuerst die Breite vergrößert, dann wird die Höhe vergrößert und dann wird die Transparenz geändert usw. Eine Reihe von Bewegungen werden nacheinander ausgeführt. Kommen wir ohne weitere Umschweife zu den Kastanien! !

Wenn sich die Maus in p bewegt, wird p zuerst breiter, dann größer und ändert dann die Transparenz, wenn es herausbewegt wird, und kehrt in seinen ursprünglichen Zustand zurück um eins;

Implementiert die Kette Für die Bewegung müssen wir die startMove()-Funktion im vorherigen Artikel weiter verbessern

function startMove(obj,attr,iTarget,fn) und eine weitere übergeben fn-Parameter , um anzuzeigen, wann eine Bewegung endet. Fahren Sie danach mit der nächsten Bewegung fort. Natürlich muss eine Entscheidung getroffen werden , führe die nächste Bewegung aus. Wenn nicht, fahre mit der nächsten Bewegung fort

if(fn){
  fn();
}

Vollständiger Testcode:

HTML-Teil:

<body>
<p id="p1"></p>
</body>

CSS-Teil:

<style>
  #p1{
   width: 200px;height: 200px;
   background: green;
  }
</style>

js-Teil:

<script>
  window.onload = function(){
   var op = document.getElementById(&#39;p1&#39;);
   op.onmouseover = function () {
    startMove(op,&#39;width&#39;,300,function () {
     startMove(op,&#39;height&#39;,300, function () {
      startMove(op,&#39;opacity&#39;,30);
     });
    });
   }
   op.onmouseout = function () {
    startMove(op,&#39;opacity&#39;,100, function () {
     startMove(op,&#39;height&#39;,200, function () {
      startMove(op,&#39;width&#39;,200);
     });
    });
   }
  }
  function getStyle(obj,attr){
   return getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr];
  }
  function startMove(obj,attr,iTarget,fn) {//fn：执行下一个运动的函数
   clearInterval(obj.timer);
   obj.timer = setInterval(function () {
    var objAttr = 0;
    if(attr == "opacity"){
     objAttr = Math.round(parseFloat(getStyle(obj,attr))*100);
    }else{
     objAttr = parseInt(getStyle(obj,attr));
    }
    var iSpeed = (iTarget -objAttr)/10;
    iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
    if(objAttr == iTarget){
     clearInterval(obj.timer);
     if(fn){// 如果传了 “下一个运动的函数” 就执行
      fn();
     }
    }else{
     if(attr == "opacity"){
      obj.style.filter = &#39;alpha(opacity:&#39;+(objAttr+iSpeed)+&#39;)&#39;;
      obj.style.opacity = (objAttr+iSpeed)/100;
     }else{
      obj.style[attr] = objAttr+iSpeed+&#39;px&#39;;
     }
    }
   },30);
  }
</script>

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, es wird in Zukunft für alle hilfreich sein.

Verwandte Artikel:

ProxyTable-domänenübergreifende Probleme im Vue-Cli-Projekt

Express erstellt Abfrageserver

Verwenden Sie die benutzerdefinierte Trimmfunktion von js, um Leerzeichen an beiden Enden zu entfernen

JavaScript-Ausführungsprinzip

Detaillierte Erklärung der Verwendung von Jest to Testen Sie die native Komponente.

Das obige ist der detaillierte Inhalt vonKettenbewegung in JS (ausführliches Tutorial). 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

Vorheriger Artikel：JS-BewegungseffekteNächster Artikel：JS-Bewegungseffekte

In Verbindung stehende Artikel

Mehr sehen