Maison > Article > interface Web > js, partage d'exemples d'effets d'animation coulissants
js, partage d'exemples d'effets d'animation coulissants
- 小云云original
- 2018-03-14 17:30:272343parcourir
Cet article partage principalement avec vous des exemples d'effets d'animation coulissants js. J'espère que tout le monde pourra apprendre à utiliser js pour créer des effets d'animation coulissants simples.
<!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!