Exemple d'explication basée sur le mouvement uniforme js

Cet article vous apporte principalement un exemple d'explication basé sur un mouvement uniforme (barre latérale, fondu entrant et sortant). L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Comment faire bouger un élément (tel que p) en JavaScript ?

Définissez le style de base et assurez-vous de positionner le p (bien sûr, vous pouvez également utiliser les changements de marge pour créer des effets de mouvement pour les éléments

<style>
    p {
      width: 100px;
      height: 100px;
      background: red;
      position: absolute;
      left: 0px;
    }
</style>

Structure de base :

   <input type="button" value="动起来"/>
   <p id="box"></p>

Lorsque nous cliquons sur ce bouton, pour faire bouger p, nous devons en fait faire en sorte que la valeur gauche de p continue de changer, puis p aura un effet de mouvement. Nous laissons d'abord la gauche changer, puis laissons. ça continue de changer

window.onload = function(){
    var oBtn = document.querySelector( "input" ),
      oBox = document.querySelector( '#box' );
    oBtn.onclick = function(){
      oBox.style.left = oBox.offsetLeft + 10 + 'px';
    }
  }

Ensuite, chaque fois que je clique sur le bouton, la valeur gauche de p sera ajoutée à la valeur d'origine de 10px. Ici, vous pouvez également utiliser la méthode d'obtention du style non interligne pour obtenir la valeur de left plus 10px, et vous pouvez également obtenir l'effet

function css(obj, attr) {
  if (obj.currentStyle) {
    return obj.currentStyle[attr];
  } else {
    return getComputedStyle(obj, false)[attr];
  }
}
window.onload = function () {
  var oBtn = document.querySelector("input"),
    oBox = document.querySelector('#box');
  oBtn.onclick = function () {
    oBox.style.left = parseInt( css( oBox, 'left' ) ) + 10 + 'px';
  }
}

offsetLeft Quelle est la différence entre obtenir la valeur de. Il reste un style non interligne ?

offsetLeft n'a pas d'unité px, mais left a une unité px

oBtn.onclick = function () {
    // alert( css( oBox, 'left' ) ); //0px
    alert( oBox.offsetLeft ); //0
  }

Maintenant, on clique sur p pour se déplacer. il? Ajouter une minuterie

  oBtn.onclick = function () {
    setInterval( function(){
      oBox.style.left = oBox.offsetLeft + 10 + 'px';
    }, 1000 / 16 );
  }

Lorsque nous cliquons sur le bouton, p continuera à se déplacer vers la gauche. Comment l'arrêter ? L'arrêt nécessite définitivement des conditions. Par exemple, nous lui demandons de s'arrêter lorsqu'il atteint 500px

var timer = null;
  oBtn.onclick = function () {
    timer = setInterval( function(){
      if ( oBox.offsetLeft == 500 ) {
        clearInterval( timer );
      }else {
        oBox.style.left = oBox.offsetLeft + 10 + 'px';
      }
    }, 1000 / 16 );
  }

De cette façon, nous pouvons faire en sorte que p s'arrête à 500px. Ici, si nous définissons la longueur du pas sur 10, changez-la en. 7 ou 8, et vous découvrirez que vous ne pouvez pas vous arrêter. Pourquoi ? Parce que la condition de jugement de 500px sera ignorée

0, 7, 14, 21 .... 280, 287, 294, 301, ... 490, 497, 504. Elle est ignorée de 497 à 504 500px, donc p ne peut pas s'arrêter, que dois-je faire ? Modifiez simplement la condition de jugement.

oBtn.onclick = function () {
  timer = setInterval( function(){
    if ( oBox.offsetLeft >= 500 ) {
      oBox.style.left = 500 + 'px';
      clearInterval( timer );
    }else {
      oBox.style.left = oBox.offsetLeft + 7 + 'px';
    }
  }, 1000 / 16 );
}

Changez la condition en >=500 pour effacer le minuteur, et ajoutez également ce code oBox.style.left = 500 + 'px', donc il est forcé de s'arrêter. à 500px, sinon p ne s'arrêtera pas à 500px, mais à 504px. Si vous continuez à cliquer sur le bouton pendant que p se déplace, vous constaterez que p commence à accélérer au lieu d'ajouter 10px à chaque fois. En effet, chaque fois que vous cliquez sur un bouton, une minuterie est activée, et chaque fois que vous cliquez sur un bouton, une minuterie est activée. De cette façon, plusieurs minuteries seront superposées et la vitesse sera également superposée, donc p. commence à accélérer, alors nous devons le maintenir à une vitesse de 10px, ce qui signifie ne pas laisser la minuterie se chevaucher. En termes plus courants, cela signifie s'assurer qu'une minuterie est activée. Que faut-il faire ?

oBtn.onclick = function () {
  clearInterval( timer );
  timer = setInterval( function(){
    if ( oBox.offsetLeft >= 500 ) {
      oBox.style.left = 500 + 'px';
      clearInterval( timer );
    }else {
      oBox.style.left = oBox.offsetLeft + 7 + 'px';
    }
  }, 1000 / 16 );
}

Il vous suffit d'effacer la minuterie précédente à chaque fois que vous cliquez sur le bouton, afin de vous assurer qu'une minuterie est toujours activée. À ce stade, une structure de mouvement uniforme la plus élémentaire est terminée, puis nous. peut l'encapsuler dans une fonction

    function animate(obj, target, speed) {
        clearInterval(timer);
        timer = setInterval(function () {
          if (obj.offsetLeft == target) {
            clearInterval(timer);
          } else {
            obj.style.left = obj.offsetLeft + speed + 'px';
          }
        }, 30);
      }

Après avoir cette fonction, créons une petite application.

http://www.jiathis.com/getcode

Lorsque vous ouvrez ce site Web, vous remarquerez qu'il y a un effet de barre latérale sur le côté droit (partagez-le). est très populaire sur le site en général

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>侧边栏 - by ghostwu</title>
  <style>
    #box {
      width: 150px;
      height: 300px;
      background: red;
      position: absolute;
      left: -150px;
      top: 50px;
    }

    #box p {
      width: 28px;
      height: 100px;
      position: absolute;
      right: -28px;
      top: 100px;
      background: green;
    }
  </style>
  <script>
    window.onload = function () {
      var timer = null;
      var oBox = document.getElementById("box");
      oBox.onmouseover = function () {
        animate(this, 0, 10);
      }
      oBox.onmouseout = function () {
        animate(this, -150, -10);
      }
      function animate(obj, target, speed) {
        clearInterval(timer);
        timer = setInterval(function () {
          if (obj.offsetLeft == target) {
            clearInterval(timer);
          } else {
            obj.style.left = obj.offsetLeft + speed + 'px';
          }
        }, 30);
      }
    }
  </script>
</head>
<body>
<p id="box">
  <p>分享到</p>
</p>
</body>
</html>

Un autre effet de fondu :

Lorsque la souris est déplacée. vers le haut, la transparence devient 1

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>淡入淡出 - by ghostwu</title>
  <style>
    img {
      border: none;
      opacity: 0.3;
      filter: alpha(opacity:30);
    }
  </style>
  <script>
    window.onload = function () {
      var timer = null;
      var oImg = document.getElementById("img");
      oImg.onmouseover = function(){
        animate( this, 100, 10 );
      }
      oImg.onmouseout = function(){
        animate( this, 30, -10 );
      }
      //alpha=30 --> 100
      function animate(obj, target, speed) {
        clearInterval(timer);
        var cur = 0;
        timer = setInterval(function () {
          cur = css( obj, 'opacity') * 100;
          if( cur == target ){
            clearInterval( timer );
          }else {
            cur += speed;
            obj.style.opacity = cur / 100;
            obj.style.filter = "alpha(opacity:" + cur + ")";
          }
        }, 30);
      }

      function css(obj, attr) {
        if (obj.currentStyle) {
          return obj.currentStyle[attr];
        } else {
          return getComputedStyle(obj, false)[attr];
        }
      }
    }
  </script>
</head>
<body>
<img src="./img/h4.jpg" alt="" id="img"/>
</body>
</html>

Recommandations associées :

Comment utiliser le canevas HTML5 pour obtenir un mouvement uniforme

Utiliser js pour spécifier la taille du pas afin d'obtenir un mouvement uniforme dans une direction

Exemple de code JS pour obtenir des compétences motion_javascript uniformes

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!