Comment implémenter le mouvement de mise en mémoire tampon dans js (exemple de code)-js tutoriel-php.cn

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

不言

Libérer： 2018-08-31 10:25:00

original

1246 Les gens l'ont consulté

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>

Copier après la connexion

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!