Animation de boucle jQuery et méthode d'obtention du composant size_jquery

L'exemple de cet article décrit la méthode d'animation de boucle jQuery et d'obtention de la taille des composants. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

1. Avant-propos

1. La méthode animate() dans jQuery vous permet de créer des animations personnalisées.

La méthode animate() peut exploiter presque toutes les propriétés CSS, mais lors de l'utilisation d'animate(), tous les noms de propriétés doivent être écrits en notation Camel. Par exemple, paddingLeft doit être utilisé au lieu de padding-left et marginRight doit être utilisé. au lieu de marge, à droite, attendez. De plus, l'animation couleur n'est pas incluse dans la bibliothèque principale jQuery. Si vous devez générer des animations en couleurs, vous devez télécharger le plugin Color Animations depuis jquery.com.

2. Grâce à jQuery, il est facile de gérer la taille des éléments et des fenêtres du navigateur.
jQuery fournit les propriétés suivantes pour obtenir les dimensions des éléments et des fenêtres du navigateur.

2. Objectifs de base

Comme indiqué ci-dessous :

Créez deux boutons dans la page Web, un bouton peut changer la taille du composant entre les états d'affichage et caché, et un bouton peut basculer l'animation en boucle entre les états de démarrage et d'arrêt

Simple JQ n'a pas pour fonction de mettre en pause et de démarrer la lecture de l'animation. Vous devez télécharger le plug-in jQuery Pause pour le compléter. Dans cet exemple, l'animation de la boucle est uniquement contrôlée via JavaScript, de sorte que chaque pause ne peut être interrompue que lorsque le corps de la boucle est terminé une fois, et la fonction de pause et de démarrage à n'importe quelle position aléatoire ne peut pas être réalisée.

3. Processus de production

Ce qui suit est tout le code de la page Web, et sera expliqué partie par partie plus tard :

Copier le code Le code est le suivant :

 
 
     
         
         
         
        <script>  <br> intervalle var ;  <br> var je = 0;  <br> var j = 0 ;  <br> fonction divanimate() {  <br>     $(".d_class").animate( {gauche : " =100px"}, 500);  <br>     $(".d_class").animate( {top : " =100px" }, 500);  <br>     $(".d_class").animate( {gauche : "-=100px"}, 500);  <br>     $(".d_class").animate( {top : "-=100px" }, 500);  <br> }  <br> cycle de fonction() {  <br>     divananimer();  <br>     intervalle = setInterval("divanimate()", 2000);  <br> }  <br> $(document).ready(function() {  <br>     $("#stop").click(function() {  <br>         je ;  <br>         si (i % 2 != 0)  <br>             faire du vélo();  <br>         autre  <br>             clearInterval(intervalle);  <br>     });  <br>     $("#show").click(function() {  <br>         j ;  <br>         si (j % 2 != 0) {  <br>             vartxt = "";  <br>             txt = "<p align="center">高 : " $("#d_id").height() "px</br>";  <br>             txt = "宽: " $("#d_id").width() "px</p>";  <br>             $("#d_id").html(txt);  <br>         } autre {  <br>             vartxt = "";  <br>             $("#d_id").html(txt);  <br>         }  <br>     });  <br> })  <br>     </script> 
    ≪/tête> 
 
     
         
            显示/隐藏方块尺寸 
         
         
            开始/停止动画的循环 
         
       

            style="largeur : 100 px ; hauteur : 100 px ; couleur d'arrière-plan : #000 ; position : absolue ; haut : 50 px ; couleur : #FFF ; gauche : 50 px;">

 
     

1. Rien de spécial, il suffit de définir deux boutons sur un seul calque. Il est à noter que position:absolute doit être ajouté à la valeur du paramètre de style du calque, sinon ce calque ne pourra pas être déplacé librement sur la page Web

La couleur d'arrière-plan est la couleur d'arrière-plan du calque. color est la couleur de la police dans le calque.

Vous devez définir deux paramètres, l'identifiant et la classe, car l'animation JQ doit être contrôlée via la classe, et l'obtention de la taille du composant par JQ doit être contrôlée via l'identifiant.

En même temps, vous devez faire attention à la position du calque. Utilisez left et top pour le placer, pas margin-left et margin-top, car le code de contrôle d'animation JQ est contrôlé par left et top. Si vous utilisez margin-left et margin-top pour les placer au début de l'animation, il y aura une petite distorsion.

2. C'est la partie principale du code :

Copier le code Le code est le suivant :

                                                                                                                                                                                                                                                                                                                                                                                                                             ;                                                                                        /*C'est l'équivalent d'un pointeur qui enregistre l'état de la boucle, utilisé pour clearInterval() ci-dessous*/ intervalle variable ;
/*i est utilisé pour enregistrer le nombre de fois où le bouton "Démarrer/Arrêter la boucle d'animation" est cliqué. Si ce bouton est cliqué un nombre impair de fois, la boucle démarrera, et si le bouton est cliqué un nombre pair, le la boucle sera terminée*/
var je = 0;
/*j est utilisé pour enregistrer le nombre de fois où le bouton "Afficher/Masquer la taille de la boîte" est cliqué. Si le bouton est cliqué un nombre impair de fois, la taille sera affichée, et si le bouton est cliqué un nombre pair de fois. fois, la taille sera masquée*/
var j = 0;
/*Comme il n'y a pas de méthode toggle() encapsulée, nous devons le faire*/
fonction divanimate() {
/*Ici, vous ne pouvez contrôler le calque que via sa valeur de classe. Le symbole devant la valeur de classe est ., pas #*/
.