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

Comment implémenter le mouvement multi-objets dans JS

php中世界最好的语言

Libérer： 2018-04-13 10:52:39

original

1455 Les gens l'ont consulté

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>

Copier après la connexion

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.

Comment implémenter le mouvement multi-objets dans JS

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

Copier après la connexion

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 :

Copier après la connexion

Code js complet

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

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!