jQueryループアニメーションとコンポーネントsize_jqueryの取得方法

この記事の例では、jQueryのループアニメーションとコンポーネントサイズの取得方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

1. はじめに

1. jQuery の animate() メソッドを使用すると、カスタム アニメーションを作成できます。

animate() メソッドはほぼすべての CSS プロパティを操作できますが、animate() を使用する場合は、すべてのプロパティ名を Camel 表記で記述する必要があります。たとえば、padding-left の代わりに paddingLeft を使用し、marginRight を使用する必要があります。マージン右の代わりに、待ちます。また、カラー アニメーションは、コアの jQuery ライブラリには含まれていません。カラー アニメーションを生成する必要がある場合は、jquery.com からカラー アニメーション プラグインをダウンロードする必要があります。

2. jQuery を使用すると、要素とブラウザ ウィンドウのサイズを簡単に処理できます。
jQuery は、要素とブラウザ ウィンドウの寸法を取得するために次のプロパティを提供します。

2. 基本目標

以下に示すように:

Web ページに 2 つのボタンを作成します。1 つのボタンでコンポーネントのサイズを表示状態と非表示状態の間で切り替えることができ、1 つのボタンでループ アニメーションの開始状態と停止状態を切り替えることができます

Simple JQ にはアニメーションの再生を一時停止および開始する機能がありません。これを完了するには、jQuery Pause プラグインをダウンロードする必要があります。この例では、ループ アニメーションは JavaScript によってのみ制御されているため、各一時停止はループ本体が 1 回完了したときにのみ中断でき、任意の位置で一時停止および開始する機能は実現できません。

3. 製造工程

以下は Web ページのすべてのコードであり、後で部分ごとに説明します。

コードをコピー コードは次のとおりです:

 
 
     
         
         
         
        <スクリプト> 
var 間隔; 
変数 i = 0; 
var j = 0; 
関数 divanimate() {
    $(".d_class").animate( {left : " =100px"}, 500); 
    $(".d_class").animate( {top : " =100px" }, 500); 
    $(".d_class").animate( {left : "-=100px"}, 500); 
    $(".d_class").animate( {top : "-=100px" }, 500); 
}
関数cycle() {
    divanimate(); 
    間隔 = setInterval("divanimate()", 2000); 
}
$(document).ready(function() {
    $("#stop").click(function() {
        私 ; 
        if (i % 2 != 0)
            サイクル（）; 
        それ以外
            クリアインターバル(間隔); 
    }); 
    $("#show").click(function() {
        j ; 
        if (j % 2 != 0) {
            var txt = ""; 
            txt = "

高: " $("#d_id").height() "px
"; 
            txt = "宽: " $("#d_id").width() "px

"; 
            $("#d_id").html(txt); 
        } else {
            var txt = ""; 
            $("#d_id").html(txt); 
        }
    }); 
})
     
     
 
     
         
            显示/隐藏方块尺寸
         
        <ボタンid="停止"> 
            开開始/停止アニメーション画の循環
         
       

            style="幅: 100px; 高さ: 100px; 背景色: #000; 位置: 絶対; トップ: 50px; カラー: #FFF; 左:50px;">

 
     

1. <ボディ部分
特別なことは何もせず、1 つのレイヤーに 2 つのボタンを定義するだけです。レイヤーのスタイルパラメータ値にposition:absoluteを追加する必要があることに注意してください。追加しないと、このレイヤーをWebページ上で自由に移動できなくなります

Background-color はレイヤーの背景色です。 color はレイヤー内のフォントの色です。

JQ アニメーションはクラスを通じて制御する必要があり、JQ 取得コンポーネント サイズは ID を通じて制御する必要があるため、id と class という 2 つのパラメーターを定義する必要があります。

同時に、JQ アニメーション制御コードは left と top で制御されるため、レイヤーの位置には margin-left と margin-top ではなく、left と top を使用して配置する必要があります。 margin-left と margin-top を使用してアニメーションの先頭に配置すると、わずかな歪みが生じます。

2.

これがコアコード部分です:

コードをコピー コードは次のとおりです:

<頭>

                                                                                                                    ;                                                                                           /*これは、以下のclearInterval()で使用される、ループのステータスを記録するポインタに相当します*/ 変数間隔
/*i は、「アニメーション ループの開始/停止」ボタンがクリックされた回数を記録するために使用されます。このボタンが奇数回クリックされるとループが開始され、偶数回クリックされるとループが開始されます。ループは終了します*/
変数 i = 0; /*j は、「ボックス サイズの表示/非表示」ボタンがクリックされた回数を記録するために使用されます。ボタンが奇数回クリックされた場合はサイズが表示され、ボタンが偶数回クリックされた場合はサイズが表示されます。回の場合、サイズは非表示になります*/
var j = 0; /*カプセル化された toggle() メソッドがないため、これを行う必要があります*/
関数 divanimate() {
/*ここでは、クラス値を通じてのみレイヤーを制御できます。クラス値の前の記号は、#*/
ではありません。