Detaillierte Erklärung der Rolle der Pufferbewegung in JS-js-Tutorial-php.cn

Detaillierte Erklärung der Rolle der Pufferbewegung in JS

php中世界最好的语言

Freigeben： 2018-05-14 14:29:17

Original

1138 Leute haben es durchsucht

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Rolle von JS bei der Pufferung von Bewegungen geben. Was sind die Vorsichtsmaßnahmen für JS, um Pufferbewegungen zu implementieren?

Beim Puffern muss numerisches Runden und Aufrunden verwendet werden:

Abrunden Math.ceil()Math.floor()

Der Effekt der Verlangsamung der Bewegungsgeschwindigkeit, Bewegungsgeschwindigkeit = (Endposition - Aktueller Standort) / Eine Nummer

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS缓冲运动</title>
<style>
#p{
  width:150px;
  height:150px;
  background:#0C6;
  position:absolute;
  left:0;
  top:50px;
}
#p2{
  background:#000;
  height:600px;
  position:absolute;
  left:500px;
  width:2px;
}
</style>
</head>
<script>
var speed;
var time;
window.onload = function(){
  var btn = document.getElementById('btn');
  btn.onclick = function(){
    speed = 0;
    move(500);
  };
  btn2.onclick = function(){
    speed = 0;
    move(0);
  };
};
function move(e){
  var p = document.getElementById('p');
  clearInterval(time);
  time = setInterval(function(){
    //改变位置，如果向左则e==500， 向上取整， 否则向右，向下取整，速度=(终点位置 - 当前位置)/一个数
    e==500 ? speed = Math.ceil((e-(p.offsetLeft))/30):speed = Math.floor((e-(p.offsetLeft))/30)
    if (e <= p.style.left){//达到，关闭定时器
      clearInterval(time);
    }
    else
    {
      p.style.left = p.offsetLeft+speed+&#39;px&#39;;
    }
  },30);
};
</script>
<body>
<input type="button" value="向右运动" id="btn" />
<input type="button" value="向左运动" id="btn2" />
<p id = "p">
</p>
<p id = "p2">
</p>
</body>
</html>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Implementierung des Vollbild-Scrolling-Plug-Ins in ES6

Wie um die V-Bind-Anweisung in VueJs zu verwenden

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung der Rolle der Pufferbewegung in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!