So implementieren Sie Pufferbewegungen in js (Codebeispiel)-js-Tutorial-php.cn

So implementieren Sie Pufferbewegungen in js (Codebeispiel)

不言

Freigeben： 2018-08-31 10:25:00

Original

1244 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit der Implementierung von Pufferbewegungen in js (Codebeispiele). Ich hoffe, dass er für Sie hilfreich ist.

Eigenschaften der Pufferbewegung

Verlangsamt sich allmählich und stoppt schließlich
Je weiter die Entfernung, desto höher die Geschwindigkeit
Geschwindigkeit wird durch Distanz bestimmt
Geschwindigkeit = (Sollwert-Istwert)/Skalierungsfaktor

Große Distanz, tolle Geschwindigkeit.
Der Abstand ist gering und die Geschwindigkeit ist gering.
Geschwindigkeit ist direkt proportional zur Entfernung.
Die Geschwindigkeit muss während der Pufferbewegung gerundet werden. Wenn die Geschwindigkeit 0,9 beträgt, wird sie ohne Rundung direkt zu 0. Wenn die Geschwindigkeit größer als 0 ist, sollte sie aufgerundet werden abgerundet werden.
Als nächstes führen wir eine Pufferbewegung aus, damit sich ein Div von 0 auf 300 bewegt, und eine Pufferbewegung, damit sich ein Div von 600 auf 300 bewegt.

Code zum Implementieren der Pufferbewegung

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

Nach dem Login kopieren

Verwandte Empfehlungen:

So verwenden Sie die Kapselungsfunktion des JS-Bewegungspuffereffekts

JS-Implementierung von Multi-Object-Buffer-Motion-Beispielcode_Javascript-Fähigkeiten

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Pufferbewegungen in js (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!