Maison > Article > interface Web > Explication détaillée de la méthode de réalisation de mouvements multi-objets en JS

Explication détaillée de la méthode de réalisation de mouvements multi-objets en JS

韦小宝original: 2018-01-24 09:55:491088parcourir

Cet article présente principalement la méthode de réalisation de mouvements multi-objets en JS et analyse en détail le principe et les compétences opérationnelles associées de javascript pour réaliser des mouvements multi-objets sous forme d'exemples. Si vous êtes intéressé par JavaScript, veuillez vous référer à cet article

Cet article analyse la méthode de réalisation de mouvements multi-objets en JS à travers des exemples. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Étapes de base

Obtenez ce que vous voulez faire grâce à

1. 🎜>getElementsByTagName

Éléments pour le mouvement multi-objets

2 Ensuite, la boucle for parcourt les éléments et ajoute des événements3 Définissez la fonction startMove, qui nécessite deux paramètres, l'élément "en mouvement" actuel et. la valeur cible cible

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

Attention :

En mouvement multi-objets, tout ne peut pas être partagé

Problème :

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, appelez startMove pour démarrer une minuterie ; lorsque la souris supprime le li, une minuterie doit également être démarrée pour ramener le li à sa position d'origine. le li atteint la moitié, nous passons au deuxième li, la minuterie sera effacée en premier, puis le premier li sera bloqué à mi-chemin.

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

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

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

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

(le timer de l'objet actuel) ; il n'y a pas de problème ici ;

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

Le code complet est le suivant :

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

Ajoutez du style :

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

Code js complet

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

Alors regardons sur un exemple : Plus de mouvement d'objet - changement de transparence

Ce qui précède est tout le contenu de cet article, j'espère qu'il sera utile à tous ceux qui apprennent JavaScript ! !

Recommandations associées :

Implémentation JavaScript de l'ajout et de la suppression d'éléments dans la liste déroulante de sélection, exemples de partage

Recherche binaire de l'algorithme Javascript arbre L'exemple de code

parle de la sous-séquence commune la plus longue en JavaScript

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：Comment implémenter le mouvement JS pour modifier la transparence d'un seul objetArticle suivant：Comment implémenter le mouvement JS pour modifier la transparence d'un seul objet

Articles Liés

Voir plus