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

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

亚连

Libérer： 2018-06-09 17:32:56

original

1331 Les gens l'ont consulté

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>

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

Ajoutez du style :

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

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!