Gunakan javascript untuk mencapai kesan kemahiran snowflakes_javascript yang jatuh-tutorial js-php.cn

Gunakan javascript untuk mencapai kesan kemahiran snowflakes_javascript yang jatuh

WBOY

Lepaskan： 2016-05-16 16:20:20

asal

1258 orang telah melayarinya

Selepas membaca contoh kesan gambar terapung ke bawah dalam koleksi contoh kesan khas web JavaScript, saya fikir ia berbaloi untuk dipelajari.

Tukar gambar menjadi gambar kepingan salji untuk mencapai kesan kepingan salji yang jatuh.

Selain itu, sesetengah kandungan agak ketinggalan zaman, jadi mari kita ubahnya.

Termasuk:

1. Operasi di sebelah kiri dan atas hanya menyokong penyemak imbas IE untuk berfungsi, chrome mesti disokong.
2. Proses mengawal lokasi gambar memerlukan mendapatkan semula elemen Jika tidak, kemudian tukar kepada storan tatasusunan dan terus mengendalikan objek yang disimpan dalam tatasusunan.
3. Tambah elemen pada dokumen secara langsung dengan mencipta objek elemen melalui kod JS.

Idea pelaksanaan:

1. Mulakan dan hasilkan 10 div, yang semuanya menggunakan kedudukan mutlak Letakkan imej kepingan salji dalam setiap div, tetapkan lebar dan tinggi, dan simpannya dalam tatasusunan, supaya fungsi salji seterusnya boleh dikendalikan secara langsung.
2. Mulakan abscissa dan ordinat setiap div Sentiasa berikan kepingan salji kedudukan permulaan untuk jatuh.
3. Mulakan setiap kepingan salji untuk mempunyai langkah jatuh menegak dan langkah berayun mendatar, supaya setiap kepingan salji akan jatuh dan berayun pada kelajuan yang berbeza.
4. Buat fungsi salji dan laraskan fungsi setiap 10 saat Setiap kali anda melaraskan fungsi, ia mengawal setiap kepingan salji untuk jatuh secara menegak mengikut panjang langkahnya sendiri Ayunan mendatar dikira dengan nilai sinus dan kemudian didarab mengikut Amplitud, supaya kepingan salji jatuh dalam bentuk gelombang sinusoidal.

Anda boleh mencari gambar dalam talian.

Kod berikut serasi dengan IE8 dan Chrome.

Salin kod Kod adalah seperti berikut:

Artikel terbaru oleh pengarang