<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>JS animation</title>
<style>
*{ margin: 0; padding: 0; }
p{ background-color: green; width: 100px; height: 100px; }
</style></head><body><p id="p1"></p><script>
p1.style.position = 'absolute'
p1.style.left = 0
var n = 0
var id = setInterval( ()=> {
n = n + 5
p1.style.left = n + 'px'
if(n>100){
window.clearInterval(id)
}
},1000/24)</script></body></html>Nous savons que grâce à la rétention visuelle, la combinaison d'images statiques nous donne l'illusion d'une animation. Ici, je déplace ce petit carré 24 fois par seconde, 5 pixels à chaque fois, en utilisant cette illusion pour donner l'impression qu'il se déplace lentement.
Définissez d'abord le style de p1 afin que nous puissions contrôler son décalage vers la gauche. Le décalage est contrôlé par n, qui augmente toujours.
Puisque l'animation doit s'arrêter, nous utilisons le jugement if pour effacer l'intervalle nommé id lorsque n>100, afin qu'il ne fonctionne plus.
Recommandations associées :
Méthode jQuery pour implémenter une animation de glissement de souris sensible au menu effect_jquery
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
