Maison > Article > interface Web > Comment implémenter le mouvement de mise en mémoire tampon dans js (exemple de code)
Comment implémenter le mouvement de mise en mémoire tampon dans js (exemple de code)
- 不言original
- 2018-08-31 10:25:001221parcourir
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>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!