jQuery-Schleifenanimation und Methode zum Abrufen der Komponentengröße_jquery

Das Beispiel in diesem Artikel beschreibt die Methode der jQuery-Schleifenanimation und das Ermitteln der Komponentengröße. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

1. Vorwort

1. Mit der animate()-Methode in jQuery können Sie benutzerdefinierte Animationen erstellen.

Die animate()-Methode kann fast alle CSS-Eigenschaften bedienen, aber bei Verwendung von animate() müssen alle Eigenschaftsnamen in Camel-Notation geschrieben werden. Beispielsweise muss paddingLeft anstelle von padding-left verwendet werden und marginRight muss verwendet werden statt margin- richtig, warte. Außerdem ist Farbanimation nicht in der jQuery-Kernbibliothek enthalten. Wenn Sie Farbanimationen generieren müssen, müssen Sie das Plugin „Color Animations“ von jquery.com herunterladen.

2. Mit jQuery ist es einfach, die Größe von Elementen und Browserfenstern zu verwalten.
jQuery bietet die folgenden Eigenschaften, um die Abmessungen von Elementen und Browserfenstern zu ermitteln.

2. Grundlegende Ziele

Wie unten gezeigt:

Erstellen Sie zwei Schaltflächen auf der Webseite. Eine Schaltfläche kann die Größe der Komponente zwischen dem Anzeige- und dem ausgeblendeten Status umschalten, und eine Schaltfläche kann die Schleifenanimation zwischen dem Start- und Stoppstatus umschalten

Simple JQ verfügt nicht über die Funktion zum Anhalten und Starten der Animationswiedergabe. Sie müssen das jQuery-Pause-Plug-in herunterladen, um es abzuschließen. In diesem Beispiel wird die Schleifenanimation nur über JavaScript gesteuert, sodass jede Pause nur dann unterbrochen werden kann, wenn der Schleifenkörper einmal abgeschlossen ist, und die Funktion des Anhaltens und Startens an einer beliebigen zufälligen Position nicht erreicht werden kann.

3. Produktionsprozess

Das Folgende ist der gesamte Code der Webseite und wird später Teil für Teil erklärt:

Code kopieren Der Code lautet wie folgt:

 
 
     
         
         
         
        <script>  <br> var-Intervall;  <br> var i = 0;  <br> var j = 0;  <br> Funktion divanimate() {  <br>     $(".d_class").animate( {left : " =100px"}, 500);  <br>     $(".d_class").animate( {top : " =100px" }, 500);  <br>     $(".d_class").animate( {left : "-=100px"}, 500);  <br>     $(".d_class").animate( {top : "-=100px" }, 500);  <br> }  <br> Funktion Cycle() {  <br>     divanimate();  <br>     Intervall = setInterval("divanimate()", 2000);  <br> }  <br> $(document).ready(function() {  <br>     $("#stop").click(function() {  <br>         ich ;  <br>         if (i % 2 != 0)  <br>             Zyklus();  <br>         sonst  <br>             clearInterval(interval);  <br>     });  <br>     $("#show").click(function() {  <br>         J ;  <br>         if (j % 2 != 0) {  <br>             var txt = "";  <br>             txt = "<p align="center">高: " $("#d_id").height() "px</br>";  <br>             txt = "宽: " $("#d_id").width() "px</p>";  <br>             $("#d_id").html(txt);  <br>         } else {  <br>             var txt = "";  <br>             $("#d_id").html(txt);  <br>         }  <br>     });  <br> })  <br>     </script> 
     
 
     
         
            显示/隐藏方块尺寸 
         
         
            开始/停止动画的循环 
         
       

            style="width: 100px; height: 100px; background-color: #000; position: absolute; top: 50px; color: #FFF; left:50px;">

 
     

1. Nichts Besonderes, definieren Sie einfach zwei Schaltflächen auf einer Ebene. Es ist zu beachten, dass position:absolute zum Stilparameterwert der Ebene hinzugefügt werden muss, da diese Ebene sonst nicht frei auf der Webseite verschoben werden kann

Hintergrundfarbe ist die Hintergrundfarbe der Ebene. Farbe ist die Schriftfarbe in der Ebene.

Sie müssen zwei Parameter definieren, ID und Klasse, da die JQ-Animation über die Klasse gesteuert werden muss und die Komponentengröße des JQ über die ID gesteuert werden muss.

Gleichzeitig müssen Sie auf die Position der Ebene achten, um sie zu platzieren, nicht margin-left und margin-top, da der JQ-Animationssteuercode durch left und top gesteuert wird. Wenn Sie margin-left und margin-top verwenden, um sie am Anfang der Animation zu platzieren, kommt es zu einer leichten Verzerrung.

2.

Das ist der Kerncodeteil:

Code kopieren Der Code lautet wie folgt:

                                                                                                                                                                                                                                                                                                                                                                                                         ;                                                                                        /*Dies entspricht einem Zeiger, der den Schleifenstatus aufzeichnet und unten für „clearInterval()“ verwendet wird*/ var-Intervall;
/*i wird verwendet, um die Häufigkeit aufzuzeichnen, mit der auf die Schaltfläche „Animationsschleife starten/stoppen“ geklickt wird Schleife wird beendet*/
var i = 0;
/*j wird verwendet, um die Anzahl der Klicks auf die Schaltfläche „Boxgröße anzeigen/ausblenden“ aufzuzeichnen. Wenn die Schaltfläche ungerade angeklickt wird, wird die Größe angezeigt, und wenn die Schaltfläche gerade angeklickt wird Mal wird die Größe ausgeblendet*/
var j = 0;
/*Da es keine gekapselte toggle()-Methode gibt, müssen wir dies tun*/
Funktion divanimate() {
/*Hier können Sie die Ebene nur über ihren Klassenwert steuern. Das Symbol vor dem Klassenwert ist ., nicht #*/