recherche

Maison >interface Web >js tutoriel >js, partage d'exemples d'effets d'animation coulissants

js, partage d'exemples d'effets d'animation coulissants

小云云
小云云original
2018-03-14 17:30:272396parcourir

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment implémenter l'effet d'animation du tampon de réponse de la souris ?Article suivant：Comment implémenter l'effet d'animation du tampon de réponse de la souris ?

Articles Liés

Voir plus