animasi gelung jQuery dan kaedah mendapatkan size_jquery komponen

Contoh dalam artikel ini menerangkan kaedah animasi gelung jQuery dan mendapatkan saiz komponen. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

1. Kata Pengantar

1. Kaedah animate() dalam jQuery membolehkan anda membuat animasi tersuai.

Kaedah animate() boleh mengendalikan hampir semua sifat CSS, tetapi apabila menggunakan animate(), semua nama sifat mesti ditulis dalam notasi Camel Contohnya, paddingLeft mesti digunakan bukannya padding-left dan marginRight mesti digunakan bukannya margin- kanan, tunggu. Selain itu, animasi warna tidak termasuk dalam perpustakaan jQuery teras. Jika anda perlu menjana animasi berwarna, anda perlu memuat turun pemalam Animasi Warna daripada jquery.com.

2. Melalui jQuery, ia adalah mudah untuk mengendalikan saiz elemen dan tetingkap penyemak imbas.
jQuery menyediakan sifat berikut untuk mendapatkan dimensi elemen dan tetingkap penyemak imbas.

2. Matlamat asas

Seperti yang ditunjukkan di bawah:

Buat dua butang dalam halaman web, satu butang boleh menukar saiz komponen antara paparan dan keadaan tersembunyi, dan satu butang boleh menukar animasi gelung antara keadaan mula dan berhenti

JQ Mudah tidak mempunyai fungsi menjeda dan memulakan main balik animasi Anda mesti memuat turun pemalam Jeda jQuery untuk melengkapkannya. Dalam contoh ini, animasi gelung hanya dikawal melalui JavaScript, jadi setiap jeda hanya boleh diganggu apabila badan gelung selesai sekali, dan fungsi menjeda dan bermula pada sebarang kedudukan rawak tidak boleh dicapai.

3. Proses pengeluaran

Berikut ialah semua kod halaman web, dan akan dijelaskan bahagian demi bahagian kemudian:

Salin kod Kod adalah seperti berikut:

 
 
     
         
         
         
         
selang var; 
var i = 0; 
var j = 0; 
function divanimate() { 
    $(".d_class").animate( {left : " =100px"}, 500); 
    $(".d_class").animate( {atas : " =100px" }, 500); 
    $(".d_class").animate( {left : "-=100px"}, 500); 
    $(".d_class").animate( {atas : "-=100px" }, 500); 
} 
kitaran fungsi() { 
    divanimate(); 
    interval = setInterval("divanimate()", 2000); 
} 
$(document).ready(function() { 
    $("#stop").klik(function() { 
        i ; 
        jika (i % 2 != 0) 
            kitaran(); 
        lain 
            clearInterval(selang); 
    }); 
    $("#show").klik(function() { 
        j ; 
        jika (j % 2 != 0) { 
            var txt = ""; 
            txt = "

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

"; 
            $("#d_id").html(txt); 
        } lain { 
            var txt = ""; 
            $("#d_id").html(txt); 
        } 
    }); 
}) 
     
     
 
     
         
            显示/隐藏方块尺寸 
         
         
            开始/停止动画的循环 
         
       

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

 
     

1.
Tiada apa-apa yang istimewa, hanya tentukan dua butang pada satu lapisan. Perlu diingat bahawa position:absolute mesti ditambah pada nilai parameter gaya lapisan, jika tidak, lapisan ini tidak boleh dialihkan secara bebas pada halaman web

Warna latar belakang ialah warna latar belakang lapisan. warna ialah warna fon dalam lapisan.

Anda perlu menentukan dua parameter, id dan kelas, kerana animasi JQ perlu dikawal melalui kelas, dan saiz komponen JQ perlu dikawal melalui id.

Pada masa yang sama, anda perlu memberi perhatian kepada kedudukan lapisan Gunakan kiri dan atas untuk meletakkannya, bukan margin-left dan margin-top, kerana kod kawalan animasi JQ dikawal oleh kiri dan atas. Jika anda menggunakan margin-left dan margin-top untuk meletakkannya pada permulaan animasi, akan terdapat sedikit herotan.

2. Itu adalah bahagian kod teras:

Salin kod Kod adalah seperti berikut:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                /*Ini bersamaan dengan penunjuk yang merekodkan status gelung, digunakan untuk clearInterval() di bawah*/ var selang; /*i digunakan untuk merekodkan bilangan kali butang "Start/Stop Animation Loop" diklik. gelung akan ditamatkan*/
var i = 0; /*j digunakan untuk merekodkan bilangan kali butang "Tunjukkan/Sembunyikan Saiz Kotak" diklik. kali, saiz akan disembunyikan*/
var j = 0; /*Oleh kerana tiada kaedah toggle() encapsulated, kita perlu melakukan ini*/
function divanimate() {
/*Di sini anda hanya boleh mengawal lapisan melalui nilai kelasnya Simbol di hadapan nilai kelas ialah ., bukan #*/