Cara menggunakan jQuery untuk mencapai kesan animasi putaran berterusan imej

Dalam penghasilan halaman web, menggunakan kesan animasi boleh meningkatkan kecerahan dan daya tarikan halaman Salah satu kesannya ialah untuk mencapai kesan memutar gambar secara berterusan, yang boleh menambahkan lebih banyak kesan visual dan deria artistik pada halaman. Dalam artikel ini, kami akan memperkenalkan cara menggunakan jQuery untuk melaksanakan kesan animasi putaran imej yang mudah.

1. Persediaan

Pertama, kita perlu menyediakan imej dan kemudian menyimpannya secara setempat. Di sini, kami akan menggunakan imej dinamik yang dipanggil "spinner.gif". Anda boleh memuat turun imej yang serupa dari Internet untuk menggantikannya.

2. Perkenalkan perpustakaan jQuery

Sebelum melaksanakan kesan animasi, anda perlu memperkenalkan perpustakaan jQuery terlebih dahulu.

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

3. Mencapai kesan putaran berterusan imej

Tambah elemen div dalam fail HTML, dan kemudian tetapkan lebar dan ketinggian elemen dalam fail CSS dan imej latar belakang. Anda juga perlu menetapkan atribut transformasi elemen untuk memutarkannya. Kodnya adalah seperti berikut:

<div class="spinner"></div>

<style type="text/css">
    .spinner {
        width: 100px;
        height: 100px;
        background: url('spinner.gif') no-repeat center center;
        transform: rotate(0deg);
    }
</style>

Kemudian, tambahkan kod berikut dalam jQuery untuk mencapai kesan putaran berterusan imej:

<script type="text/javascript">
    $(function(){
        var spinner = $('.spinner'); // 获取到 div 元素
        var deg = 0; // 设定图片的初始旋转度数为0
        setInterval(function(){
            deg += 1; // 旋转的度数每次增加1度
            spinner.css({'transform': 'rotate('+deg+'deg)'}); // 设置图片旋转的度数
        }, 10);
    });
</script>

Dalam kod, setInterval jQuery ialah digunakan () fungsi untuk melaksanakan operasi pemasaan. Dalam setInterval, nilai awal pembolehubah deg ditetapkan kepada 0 darjah, dan nilai deg dinaikkan sebanyak 1 darjah setiap 10 milisaat. Pada masa yang sama, dengan menukar sifat transformasi CSS, imej dalam elemen div diputar. Akhirnya, halaman akan kelihatan seperti imej berputar.

4. Ringkasan

Dalam artikel ini, kami mempelajari cara menggunakan jQuery untuk mencapai kesan putaran imej yang ringkas. Dengan menetapkan tahap putaran imej untuk meningkat secara automatik setiap masa tertentu, kesan putaran imej masa nyata dicapai. Kesan animasi ini boleh meningkatkan kecerahan dan daya tarikan halaman Ia adalah kaedah yang biasa digunakan dalam penghasilan halaman web. Saya harap artikel ini akan membantu semua orang.

Atas ialah kandungan terperinci Cara menggunakan jQuery untuk mencapai kesan animasi putaran berterusan imej. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!