Maison  >  Article  >  interface Web  >  Comment implémenter le mouvement de mise en mémoire tampon dans js (exemple de code)

Comment implémenter le mouvement de mise en mémoire tampon dans js (exemple de code)

不言
不言original
2018-08-31 10:25:001196parcourir

Le contenu de cet article explique comment implémenter le mouvement de mise en mémoire tampon dans js (exemples de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Caractéristiques du mouvement tampon

  • Ralentit progressivement et s'arrête finalement

  • Plus la distance est longue, plus la vitesse est grande

  • La vitesse est déterminée par la distance

  • Vitesse = (valeur cible-valeur actuelle)/facteur d'échelle

Grande distance, grande vitesse.
La distance est petite et la vitesse est petite.
La vitesse est directement proportionnelle à la distance.
La vitesse doit être arrondie pendant le mouvement de mise en mémoire tampon. Si la vitesse est de 0,9, elle deviendra directement 0 sans arrondi ; si la vitesse est supérieure à 0, elle doit être arrondie, et si elle est inférieure à 0, elle doit être arrondie. être arrondi à l'inférieur.
Ensuite, nous effectuerons un mouvement de tampon pour qu'un div passe de 0 à 300, et un mouvement de tampon pour qu'un div passe de 600 à 300.

Code pour implémenter le mouvement de mise en mémoire tampon

<!DOCTYPE html>
<html>
  <head>
    <title>缓冲运动</title>
    <style>
      #div1{
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
        /* left: 0; */
        left: 600px;
        top: 50px;
      }
      #div2{
        /* 300位置的参考线 */
        width: 1px;
        height: 300px;
        position: absolute;
        left: 300px;
        top: 0;
        background: #000;
      }
    </style>
    <script>
      window.onload=function(){
        var oBtn=document.getElementById("btn1");
        oBtn.onclick=function(){
          startMove();
        }
      }

      function startMove(){
        var oDiv=document.getElementById("div1");
        setInterval(function(){
          var speed=(300-oDiv.offsetLeft)/10;
          speed=speed>0?Math.ceil(speed):Math.floor(speed);//取整
          oDiv.style.left=oDiv.offsetLeft+speed+"px";
        },30);
      }
    </script>
  </head>
  <body>
    <input id="btn1" type="button" value="开始运动" />
    <div id="div1"></div>
    <div id="div2"></div>
  </body>
</html>

Recommandations associées :

Comment utiliser la fonction d'encapsulation de l'effet de mise en mémoire tampon de mouvement JS

Implémentation JS d'un exemple de mouvement de tampon multi-objets compétences code_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