Setelah membaca contoh -contoh gambar yang mengambang di contoh efek khusus halaman web JavaScript, saya pikir itu layak untuk dipelajari.
Ubah gambar menjadi gambar kepingan salju untuk melengkapi efek dari kepingan salju yang jatuh.
Selain itu, beberapa konten relatif ketinggalan zaman, jadi mari kita ubah oleh para sarjana.
termasuk:
1. Operasi di kiri dan atas hanya dukungan IE browser. Ini oke. Itu harus mendukung Chrome.
2. Untuk mengontrol keberadaan gambar, Anda juga perlu mencari elemen. Jika tidak, maka ubahlah menjadi pemeliharaan array dan secara langsung mengoperasikan objek yang dikelola dalam array, yang tidak akan lebih cepat.
3. Menambahkan elemen ke dokumen secara langsung berubah menjadi membuat objek elemen melalui kode JS.
Ide Implementasi:
1. Menginisialisasi dan menghasilkan 10 Divs, yang semuanya benar -benar diposisikan. Letakkan gambar kepingan salju di setiap div, atur lebar dan tinggi, dan simpan dalam array, sehingga fungsi yang kemudian salju dapat beroperasi secara langsung.
2. Inisialisasi koordinat horizontal dan vertikal dari masing -masing div, dan selalu berikan kepingan salju posisi awal untuk musim gugur.
3. Inisialisasi setiap kepingan salju dengan langkah drop vertikal dan langkah ayunan horizontal, sehingga setiap kepingan salju akan jatuh dan berayun dengan kecepatan yang berbeda.
4. Buat fungsi salju, sesuaikan fungsi setiap 10 detik. Setiap kali, ia mengontrol fungsi untuk mengontrol panjang setiap kepingan salju yang jatuh secara vertikal. Ayunan horizontal dihitung dengan fungsi sinus dan dikalikan dengan amplitudo. Dengan cara ini, kepingan salju jatuh sesuai dengan bentuk gelombang sinus.
Anda dapat menemukan gambar apa pun secara online.
Kode berikut kompatibel dengan IE8+ dan Chrome.
Salinan kode adalah sebagai berikut:
<body>
<Bahasa skrip = "javascript">
// Dalam proses gambar, lintasan koordinat horizontal adalah kurva sinusoidal yang berpusat pada suatu titik.
// Fungsi animasi diselesaikan dengan menggunakan fungsi setTimeout
//gambar
var snowsrc = "snowflake.png"
// Jumlah kepingan salju
var no = 10;
// Deklarasikan variabel, XP mewakili koordinat horizontal, YP mewakili koordinat vertikal>
var dx, xp, yp;
// menyatakan variabel, AM mewakili amplitudo ayunan kiri dan kanan, STX mewakili langkah offset dari koordinat horizontal, Sty mewakili langkah koordinat vertikal>
Var AM, STX, Sty;
{
// Dapatkan lebar jendela saat ini
clientWidth = document.body.clientwidth;
// Dapatkan ketinggian jendela saat ini
clientHeight = document.body.clientHeight;
}
var dx = array baru ();
var xp = array baru ();
var yp = array baru ();
var am = array baru ();
var stx = array baru ();
var sty = array baru ();
var snowflakes = array baru ();
untuk (i = 0; i <no; ++ i) {
dx [i] = 0;
// Nilai awal koordinat horizontal dari gambar i-th
xp [i] = math.random ()*(clientWidth-50);
yp [i] = math.random ()*clientheight; // nilai asli dari koordinat vertikal gambar i-th
AM [i] = math.random ()*20; // amplitudo ayunan kiri dan kanan gambar i-th
stx [i] = 0,02 + math.random ()/10; // Panjang langkah dari arah x gambar i-th
sty [i] = 0,7 + math.random (); // Panjang langkah dari arah i-th arah y
// menghasilkan div yang memegang gambar kepingan salju dan menetapkan koordinat absolutnya
var snowflakediv = document.createelement ('div');
snowflakediv.setAttribute ('id', 'dot'+ i);
snowflakediv.style.position = 'absolute';
snowflakediv.style.top = 15;
snowflakediv.style.left = 15;
// Hasilkan objek gambar kepingan salju, atur lebar dan tinggi, dan tambahkan div
var snowflakeiMg = document.createElement ('img');
SnowflakeiMg.setAttribute ('SRC', SnowsRC);
Snowflakeimg.style.width = 30;
SnowflakeiMg.Style.Height = 30;
// Tambahkan Snowflake Div ke dalam dokumen dan simpan melalui array
Snowflakediv.AppendChild (SnowflakeiMg);
Document.Body.AppendChild (Snowflakediv);
Snowflakes [i] = Snowflakediv;
}
function snow () {
untuk (i = 0; i <no; ++ i) {
// koordinat vertikal plus panjang langkah gambar i-th
yp [i] += sty [i];
// Jika koordinat baru melebihi tepi bawah layar, setel ulang informasi gambar, termasuk koordinat horizontal, koordinat vertikal, dan ukuran langkah dalam arah-X dan ukuran langkah dalam arah-y Y Y
if (yp [i]> clientHeight-50) {
// Putar kembali koordinat horizontal gambar
xp [i] = math.random ()*(clientwidth-am [i] -30);
// Putar kembali koordinat vertikal gambar
yp [i] = 0;
}
dx [i] += stx [i]; // tambahkan satu langkah
// Langsung memanipulasi div kepingan salju yang sesuai di array
var snow -hlakediv = Snowflakes [i];
// Perbarui koordinat vertikal gambar
snowflakediv.style.top = yp [i];
// Perbarui sumbu horizontal gambar
snowflakediv.style.left = xp [i] + am [i]*math.sin (dx [i]);
}
// Tetapkan periode waktu untuk penyegaran animasi
setTimeout ("Snow ()", 10);
}
// Memanggil fungsi Snowie ()
salju();
</script>
</body>
Di atas adalah semua kode, dan efeknya cukup bagus. Untuk penjelasan spesifik, silakan merujuk ke komentar. Saya tidak akan berbicara banyak omong kosong di sini. Saya harap ini akan membantu semua orang.