Comment implémenter le mouvement multi-objets dans JS

Cette fois, je vais vous présenter la méthode d'implémentation du mouvement multi-objets JS. Quelles sont les précautions pour implémenter le mouvement multi-objets JS. Ce qui suit est un cas pratique, prenons un. regarder.

Étapes de base

1. Obtenez les éléments à déplacer par plusieurs 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ément 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>

Question :

Lorsque la vitesse d'entrée et de sortie est relativement rapide, certains li ne pourront pas revenir à leur état d'origine et resteront bloqués au milieu

C'est parce que tous les li partagent une minuterie Lorsque la souris se déplace dans le premier li, startMove est appelé pour démarrer un timer ; lorsque la souris supprime le li, un timer doit également être démarré pour ramener le li à sa position d'origine. Lorsque le li atteint la moitié du chemin, nous passons au premier li. deuxième li. Premier La minuterie sera effacée, et à ce moment le premier li sera bloqué à mi-chemin.

Résolvez ce problème :

Laissez chaque li avoir son propre timer pour contrôler ses modifications. Pendant la boucle for, définissez un timer pour chaque li

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

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

Le minuteur précédent ici a été remplacé par

(le propre minuteur de l'objet actuel) ; il n'y a aucun problème ici ;

obj.timer Le code complet est le suivant :

Ajouter un style de point :

  
•   
•   
•   

Code js complet

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

Regardons ensuite un exemple : Mouvement multi-objets - modification de la transparence

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres éléments connexes. articles sur le site PHP chinois !

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

Lecture recommandée :

Comment gérer la page de rendu sans réflexion lorsque le routage de vue est rafraîchi en mode historique

vue . Explication détaillée des étapes pour obtenir un effet de défilement fluide avec 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!