Maison > Article > interface Web > Explication détaillée du rôle du mouvement tampon dans JS
Explication détaillée du rôle du mouvement tampon dans JS
- php中世界最好的语言original
- 2018-05-14 14:29:171141parcourir
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+'px';
}
},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>
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!