Maison > Article > interface Web > Comment implémenter le mouvement multi-objets dans JS (tutoriel détaillé)

Comment implémenter le mouvement multi-objets dans JS (tutoriel détaillé)

亚连original: 2018-06-09 17:32:561378parcourir

Cet article présente principalement la méthode de réalisation de mouvements multi-objets en JS. Il analyse en détail les principes et les techniques de fonctionnement associées du javascript pour réaliser des mouvements multi-objets sous forme d'exemples.

L'exemple analyse la méthode de réalisation de mouvements multi-objets en JS. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Étapes de base

1. Obtenez les éléments pour le mouvement multi-objets. via getElementsByTagName
2. Ensuite, la boucle for parcourt les éléments et ajoute des événements
3. Définissez la fonction startMove, qui nécessite deux paramètres, l'élément "faire l'exercice" actuel et la valeur cible cible

Remarque : Dans le mouvement multi-objets, tout ne peut pas être partagé

<script>
    window.onload = function(){
      var liTags = document.getElementsByTagName(&#39;li&#39;); // 第一步
      for(var i=0;i<liTags.length;i++){ // 第二步
         liTags[i].onmouseover = function () {
         startMove(this,400);
         }
         liTags[i].onmouseout = function () {
         startMove(this,200);
         }
      }
    }
    var timer = null;
    function startMove(obj,iTarget) { // 第三步，2个参数
      clearInterval(timer);
      timer = setInterval(function () {
        var iSpeed = (iTarget - obj.offsetWidth)/10;
        iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);// 缓冲运动注意取整处理
        if(obj.offsetWidth == iTarget){
          clearInterval(timer);
        }else{
          obj.style.width = obj.offsetWidth+iSpeed+&#39;px&#39;;
        }
      },30);
    }
</script>

Problème :

Quand ; entrer et sortir est plus rapide Parfois, certains li ne peuvent pas revenir à leur état d'origine et restent bloqués à mi-chemin C'est parce que tous les li partagent une minuterie

Lorsque la souris entre dans Pour la première fois ; li, appelez startMove pour démarrer une minuterie ; lorsque la souris supprime le li, vous devez également démarrer une minuterie pour ramener le li à sa position d'origine. Lorsque le li atteint la moitié du chemin, nous passons au deuxième li, et la minuterie sera. effacé en premier, à ce moment-là, le premier Li est resté bloqué à mi-chemin.

Résolvez ce problème : Laissez chaque li avoir son propre timer pour contrôler ses modifications et définissez chaque li pendant la boucle for. Un de vos propres timers

liTags[i].timer = null;// 给每个li都添加一个timer

Ensuite, la minuterie utilisée à chaque fois dans starMove est la minuterie actuelle, il n'y aura donc aucune interférence les unes avec les autres.

Le timer précédent ici a été remplacé par obj.timer (le timer de l'objet actuel) ; il n'y a pas de problème ici ;

Le code complet est le suivant :

<body>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
</body>

Ajoutez du style :

<style>
    ul{list-style: none;}
    ul li{
      margin: 10px;
      width: 200px;height: 50px;
      background: lightblue;
    }
</style>

Code js complet

<script>
    window.onload = function(){
      var liTags = document.getElementsByTagName(&#39;li&#39;);
      for(var i=0;i<liTags.length;i++){
         liTags[i].timer = null;// 给每个li都添加一个timer
         liTags[i].onmouseover = function () {
         startMove(this,400);
         }
         liTags[i].onmouseout = function () {
         startMove(this,200);
         }
      }
    }
    function startMove(obj,iTarget) {
      clearInterval(obj.timer);
      obj.timer = setInterval(function () {
        var iSpeed = (iTarget - obj.offsetWidth)/10;
        iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
        if(obj.offsetWidth == iTarget){
          clearInterval(obj.timer);
        }else{
          obj.style.width = obj.offsetWidth+iSpeed+&#39;px&#39;;
        }
      },30);
    }
</script>

Alors regardons à un exemple : Plus de mouvement d'objet - Changer la transparence

<script>
  window.onload = function () {
    var aImgs = document.getElementsByTagName(&#39;img&#39;);
    for(var i=0;i<aImgs.length;i++){
      aImgs[i].timer = null;
      aImgs[i].alpha = 100; // 把公用的alpha改成每个img对象都有的属性
      aImgs[i].onmouseover = function () {
        startMove(this,30);
      }
      aImgs[i].onmouseout = function () {
        startMove(this,100);
      }
    }
  }
  // var alpha = 100; 这里alpha在多物体运动里 不能公用
  function startMove(obj,iTarget) {
    clearInterval(obj.timer);
    var iSpeed = (iTarget - obj.alpha)/10;
      iSpeed = iSpeed>0 ? Math.ceil(iSpeed): Math.floor(iSpeed);
    obj.timer = setInterval(function(){
      if(obj.alpha == iTarget){
        clearInterval(obj.timer);
      }else{
        obj.alpha += iSpeed;
        obj.style.opacity =obj.alpha/100;
        obj.style.filter = &#39;alpha(opacity:&#39;+obj.alpha+&#39;)&#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 :

Quelles sont les méthodes pour ajouter de nouveaux attributs d'objets à la séquence de détection en vue ?

Comment obtenir l'effet d'animation consistant à rebondir sur le bord dans jQuery ?

Comment utiliser sass dans vue cli webpack (tutoriel détaillé)

Comment modifier la valeur du texte de la balise P dans jQuery

En créant des balises dans js Dynamics et en définissant des méthodes d'attributs (tutoriel détaillé)

Implémentation des méthodes d'ajout et d'attribution de sous-éléments de balises dans jQuery

Comment implémenter des boîtes de message couramment utilisées en JS ?

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!

JavaScript jquery sass webpack for 循环 JS 对象事件 li

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：Comment configurer la configuration dans vue (tutoriel détaillé)Article suivant：Comment configurer la configuration dans vue (tutoriel détaillé)

Articles Liés

Voir plus