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 />             txt = "宽: " $("#d_id").width() "px";  <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;">