L'exemple de cet article décrit la méthode de réalisation de l'effet de mouvement de mise en mémoire tampon dans js. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :
Cet exemple peut avoir pour effet de démarrer très rapidement, puis de ralentir jusqu'à ce qu'il s'arrête.
Points clés :
var speed = (target-box.offsetLeft)/8;
La valeur du point cible moins la position actuelle de l'élément est divisée par 8. Parce que la valeur de offsetleft ne cesse de croître, la valeur de la vitesse continue de diminuer
speed = speed>0?Math.ceil(speed):Math.floor(speed);
La vitesse avant est arrondie à l'unité supérieure, et pour la vitesse arrière, elle est arrondie à l'unité inférieure
Code :
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
<!--
body{margin:0; padding:0; font:12px/1.5 arial;}
#box{width:100px; height:100px; position:absolute;
background:#06c; left:0;}
-->
</style>
<script>
<!--
window.onload = function(){
var box = document.getElementById("box");
var btn = document.getElementById("btn");
var timer=null;
btn.onclick = function(){
startrun(300);
}
function startrun(target){
clearInterval(timer);
timer = setInterval(function(){
var speed = (target-box.offsetLeft)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(box.offsetLeft == target){
clearInterval(timer);
}else{
box.style.left = box.offsetLeft+speed+"px";
}
document.getElementById('abc').innerHTML+=box.offsetLeft+','+speed+'<br>';
},30);
}
}
//-->
</script>
</head>
<body>
<input id="btn" type="submit" value="向右运动">
<div id="box">
</div>
<br>
<textarea id="abc" cols="50" rows="10"
style="margin-top:130px"></textarea>
</body>
</html>J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
