Maison > Article > interface Web > Mouvement de chaîne en JS (tutoriel détaillé)

Mouvement de chaîne en JS (tutoriel détaillé)

亚连original: 2018-06-09 16:15:391547parcourir

Cet article présente principalement le mouvement en chaîne des effets spéciaux de mouvement JS, et analyse les principes et les techniques spécifiques de mise en œuvre du mouvement en chaîne javascript sous forme d'exemples. Les amis dans le besoin peuvent s'y référer

Les exemples de. cet article décrit le mouvement JS Chain des effets spéciaux de mouvement. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Suivez l'article précédent "Méthodes pour ajouter du mouvement avec n'importe quelle valeur dans les effets spéciaux JS Motion" et continuez à lancer

Chain Motion : Un mouvement après l'autre. Par exemple : lorsque la souris est déplacée sur p, la largeur sera d'abord agrandie, puis la hauteur sera agrandie, puis la transparence sera modifiée, etc. Une série de mouvements sont effectués successivement. Sans plus attendre, passons aux châtaignes ! !

Lorsque la souris se déplace vers p, p devient d'abord plus large, puis devient plus grand, puis change de transparence lorsqu'il est déplacé, il revient à son état d'origine ; par un;

Mise en œuvre la chaîne Pour le mouvement, nous devons continuer à améliorer la fonction startMove() de l'article précédent

function startMove(obj,attr,iTarget,fn) et en passer une de plus Paramètre fn pour indiquer quand un mouvement se termine. Après cela, passez au mouvement suivant. Bien sûr, besoin de juger S'il y a un prochain mouvement, effectuez. le mouvement suivant. Sinon, continuez à effectuer le mouvement suivant

if(fn){
  fn();
}

Code de test complet :

Partie HTML :

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

Partie css :

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

partie js :

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

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Problèmes inter-domaines de ProxyTable dans le projet vue-cli

Serveur de requêtes de builds express

Utilisez la fonction de découpage personnalisée de js pour supprimer les espaces aux deux extrémités

Principe d'exécution de JavaScript

Explication détaillée de l'utilisation de Jest pour tester le composant natif de réaction

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Effets de mouvement JSArticle suivant：Effets de mouvement JS

Articles Liés

Voir plus