Maison > interface Web > js tutoriel > le corps du texte

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

小云云
Libérer: 2018-03-14 17:30:27
original
2393 Les gens l'ont consulté

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>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal