Maison > Article > interface Web > Comment utiliser JS pour implémenter une animation simple de pliage et de dépliage

Comment utiliser JS pour implémenter une animation simple de pliage et de dépliage

php中世界最好的语言original: 2018-06-01 14:42:151659parcourir

Cette fois je vais vous montrer comment utiliser JS pour réaliser une animation simple de pliage et dépliage. Quelles sont les précautions pour utiliser JS pour réaliser une animation simple de pliage et dépliage. Voici un cas pratique, jetons un coup d'oeil.

<!DOCTYPE = html>
<html>
 <head>
  <title>JS折叠展开动画</title>
  <style>
  body{
   margin: 0px;
   padding: 0px;
  }
  .red{
   background-color:red;
   width:200px;
   height:200px;
   position:relative;
   left:-200px;
   top:0px;
  }
  .blue{
   background:blue;
   width:20px;
   height:50px;
   position:absolute;
   left:200px;
   top:75px;
  }
  </style>
 </head>
 <body>
  <p class="red" id="cf1"><p class="blue" id="cf">分享</p></p>
  <script>
  window.onload = function(){
   var onp = document.getElementById("cf1");
   onp.onmouseover = function(){
    startmove(0);
   }
   onp.onmouseout = function(){
    startmove(-200);
   }
  }
  var timer ;
  function startmove(target){
   clearInterval(timer);//清除定时器，以免多次触发定时器导致速度越来越快而不是匀速前进
   var onp1 = document.getElementById("cf1");
   timer = setInterval(function(){
   var speed = 0;
   if(onp1.offsetLeft<target){
    speed = 10;
   }else{
    speed = -10;
   }
   if(onp1.offsetLeft==target){
    clearInterval(timer);
   }
   else{
   onp1.style.left = onp1.offsetLeft+speed+&#39;px&#39;;
   }
   },30)
  }
  </script>
 </body>
</html>

Effet opérationnel :

Résumé :

1. Partie CSS :

1. N'oubliez pas l'initialisation du style ;
2. Révisez la méthode de référence des fichiers CSS (méthode de référence de classe)
3. Positionnement absolu et relation de positionnement relatif (la relation parent utilise relatif ; la relation enfant utilise absolu)

2. partie js :

element.style.left & element.offsetLeft Différence :

① L'unité du premier est px, qui est une chaîne ; l'unité de cette dernière est une valeur numérique ;

② D'autres voir : http://www.jb51.net/article/43981.htm

2 L'idée n'était pas assez claire au début, et la variable clé du placement et du déplacement de la souris n'a pas été abstraite - la position cible est juste différente

Paramètres de fonctionle moins possible (lorsque l'objectif peut être atteint)4. Il est préférable de définir l'objet d'action de la souris sur le parent p, sinon il y aura un scintillement (

onmouseover

vient d'être appelé, la cible a été supprimée et onmouseout a été rappelé) 5. Faites attention à effacer la minuterie (①, pour éviter que la vitesse ne soit lente lors du déplacement. Stable ②, arrêtez de bouger à la position cible)

3. Autres :

Q : Débloquer les fenêtres pop-up dans Google Chrome ?

A : Paramètres - Paramètres avancés - Paramètres de confidentialité - Paramètres de contenu - Fenêtre contextuelle pour définir les paramètres pertinents.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser les nœuds DOM dans JS

Comment utiliser JS pour implémenter le mouvement de mise en mémoire tampon

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：Quelles sont les étapes pour introduire le bureau à distance noVNC dans le projet vue ?Article suivant：Quelles sont les étapes pour introduire le bureau à distance noVNC dans le projet vue ?

Articles Liés

Voir plus