Explication détaillée du rôle du mouvement tampon dans JS-js tutoriel-php.cn

Explication détaillée du rôle du mouvement tampon dans JS

php中世界最好的语言

Libérer： 2018-05-14 14:29:17

original

1138 Les gens l'ont consulté

Cette fois, je vais vous apporter une explication détaillée du rôle de JS dans le buffering motion. Quelles sont les précautions pour que JS implémente le buffering motion. Voici des cas pratiques, jetons un coup d'œil.

La mise en mémoire tampon doit utiliser l'arrondi numérique, l'arrondi vers le haut : Math.ceil() Arrondi vers le bas Math.floor()

L'effet du ralentissement de la vitesse de déplacement, vitesse de déplacement = (position finale - Emplacement actuel) / Un certain nombre

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

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes pour implémenter le plug-in de défilement plein écran dans ES6

Comment pour utiliser l'instruction V-bind dans VueJs

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!