prinsip:
1. JS secara dinamis membuat Div, menentukan kelas kelas untuk mengatur gaya gambar latar belakang yang berbeda untuk menampilkan efek kepingan salju yang berbeda.
2. Js mendapatkan div yang dibuat dan mengubah nilai atribut teratasnya. Ketika ketinggian jatuh lebih besar dari ketinggian layar, div seluler akan dihapus.
3. Jangan menyemprot jika tampaknya tidak lengkap
Kode HTML:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <itement> flying snowflakes </ title> <link rel = "stylesheet" href = "css/index.css"> <script src = "js/moving.js"> </index.css "> <script src =" js/moving.js "> </script>" BOAD = "BOAD =" JS/MOVE.JS "> </script> </div> </body> </html>
Kode CSS
*{margin: 0; Padding: 0; List-style: tidak ada; Border: none;} body {width: 100%; Tinggi: 600px; latar belakang:#000;}. Snow_parent {position: relatif; Lebar: 100%; Tinggi: 100%; meluap: tersembunyi; margin: 0 auto;}. snow_parent div.parent {latar belakang-image: url (../ img/snow.png); float: kiri; -webkit-transform: skala (.1); -Moz-Transform: skala (.1); -o-transform: skala (.1); -MS-Transform: skala (.1); Transform: Skala (.1); Posisi: Absolute;}. Snow_one {lebar: 180px; Tinggi: 180px; Latar belakang posisi: 0 0; Latar belakang-repeat: No-Repeat; Kiri: -70px; atas: -95px;}. Snow_two {width: 140px; Tinggi: 140px; Latar belakang posisi: -220px -18px; Kiri: -30px; atas: -75px;}. Snow_Three {width: 150px; Tinggi: 150px; Latar belakang posisi: -400px -15px; Kiri: -20px; atas: -80px;}. Snow_four {width: 160px; Tinggi: 160px; Latar belakang posisi: -10px -206px; } .snow_four {kiri: -10px; Atas: -85px;}Kode JS:
/* creatby jiucheng 2016-4-24*/ window.onload = function () {init ();} // Buat divfunction creatDiv () {// Buat div dan tambahkan ke elemen induk var snowdiv = document.createElement ("div"); document.geteLementById ("js_sonw"). AppendChild (SnowDiv); // Buat kelas yang membuat div secara acak dan menampilkan kepingan salju yang berbeda var whatname = ["Snow_one Parent", "Snow_two Parent", "Snow_Three Parent", "Snow_four Parent"]; var index = math.floor (math.random ()*whatname.length); snowdiv.classname = whatname [index]; // Dapatkan nilai atribut kiri dari div (acak) dan tetapkan ke div var whatleft yang dibuat = getleft ()+'px'; snowdiv.style.left = whatleft; return snowdiv;} // Dapatkan fungsi nilai atribut kiri acak getLeft () {// Dapatkan nilai atribut kiri maksimum dari div, yaitu, lebar elemen induk var eleparent = document.geteLementById ("js_sonw"); // Dapatkan semua gaya dari elemen induk var var style = window.getComputedStyle (eleparent); // Kiri dalam CSS adalah angka negatif di sini harus dikurangi di sini var maxwidth = parseInt (style.width) +70; // Biarkan kiri div yang dibuat menjadi nilai acak var randomleft = math.floor (math.random ()*maxwidth); return randomleft;} // Biarkan dipindahkan () {// dapatkan objek bergerak var moveelem = creatDiv (); // Dapatkan semua nilai atribut gaya dari objek bergerak var elestyle = window.getComputedStyle (moveelem); // Dapatkan semua nilai atribut gaya dari objek bergerak var elestyle = window.getComputedStyle (moveelem); // Dapatkan nilai atribut teratas var eLetop = parseInt (elestyle.top); // Atur timer untuk secara dinamis mengubah nilai atribut teratas dari objek bergerak var t = setInterval (function () {eLETOP ++; // Bayar nilai teratas baru ke objek bergerak moving.style.top = eLetop+"px"; // Ketika jatuh ke ketinggian layar, hentikan timer dan hapus objek bergerak dari Parents Parten (ELETOP/ ELETOP, Hentikan timer dan hapus Objek Pindah dari Parente dari Parente {ELETOP/ ELETOP, Hentikan Pengatur Waktu dan Hapus Objek Moving dari Parente dari Parente dari Parente (ELETOP/ HOBLE Objek PUTRE/ HOSTE OBECTE (ELETEOP/ HUBUT DAN HAPUS Objek PUTER DARI PUTRE/ HOSTE DARI Objek, ClearInterval (T); // Kecepatan drop tidak memiliki 10 milidetik untuk jatuh 1px} function init () {// secara dinamis dapatkan dan atur ketinggian body document.body.style.height = window.innerheight+"px"; // Buat objek bergerak setiap 500 milidetik dan jalankan fungsi gerakan var t = setInterval (function () {movingown ();}, 100);}Artikel di atas JavaScript mencapai efek salju [Contoh Kode] adalah semua konten yang saya bagikan dengan Anda. Saya harap ini dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.