Maison >interface Web >js tutoriel >JS réalise une animation de pliage et de dépliage (avec code)

JS réalise une animation de pliage et de dépliage (avec code)

php中世界最好的语言original: 2018-05-14 14:38:142645parcourir

Cette fois, je vais vous apporter JS pour réaliser une animation de pliage et de dépliage (avec code). Quelles sont les précautions pour réaliser une animation de pliage et de dépliage avec JS (avec code). cas pratique. Jetons un coup d'oeil une fois.

<!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>

Résumé :

1. Partie CSS :

1. N'oubliez pas l'initialisation du style ;
2. Vérifiez la méthode de référence des fichiers CSS (méthode de référence de classe)
3. (relation parentale) Utilisez relatif ; utilisez absolu pour les sous-relations)

2. partie js :

1 ,

element.style.left

& element.offsetLeft Différence : ① L'unité du premier est px, qui est une chaîne ; une valeur numérique ;

2, L'idée n'est pas assez claire au début, et les variables clés du placement et du déplacement de la souris ne peuvent pas être abstraites - la position cible est simplement différente

Paramètres de fonction

aussi peu que possible (lorsque l'objectif peut être atteint) Bas) 4. Il est préférable de définir l'objet d'action de la souris sur le parent p, sinon un scintillement se produira (

onmouseover

vient d'être appelé, la cible a été supprimée et onmouseout) Faites attention à effacer la minuterie (①, pour éviter une vitesse instable. lorsque vous vous déplacez ②, arrêtez de bouger à la position cible)

3. Autres :

Q : Google Chrome peut-il débloquer les fenêtres contextuelles ?

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 :

vue+vue-router+vuex autorisations d'opération

utilisation de v-bind et v-on Explication détaillée du cas

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：JS implémente la fonction de dégradé de transparenceArticle suivant：JS implémente la fonction de dégradé de transparence

Articles Liés

Voir plus