Artikel ini menjelaskan metode JavaScript untuk mencapai efek hamburan kepingan salju berwarna -warni dari langit. Bagikan untuk referensi Anda. Analisis spesifiknya adalah sebagai berikut:
Mari kita lihat efek berjalan terlebih dahulu, seperti yang ditunjukkan pada gambar di bawah ini:
Kode sumber lengkap adalah sebagai berikut:
Salin kode sebagai berikut: <! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> javascript kepingan salju berwarna -warni jatuh dari langit </iteme>
<type style = "text/css">
.jb51snow {display: block; meluap: tersembunyi; font-size: 12px; Posisi: Absolute};
body {background:#000; margin: 0px}
html {overflow: tersembunyi; Latar belakang:#000;}
A {Color: White; Text-Decoration: None}
.jb51title {color: red; tinggi: 140px; lebar: 800px; margin: 0px auto; text-align: center}
</tyle>
</head>
<body>
<type skrip = "Teks/JavaScript">
var yanhua = "yanhua.vevb.com";
var fire = function (r, color) {
this.radius = r || 12;
this.color = color || "FF6600";
this.xpos = 0;
this.ypos = 0;
this.zpos = 0;
this.vx = 0;
this.vy = 0;
this.vz = 0;
this.mass = 1;
this.p = document.createElement ("span");
this.p.classname = "jb"+"51snow";
this.p.innerHtml = "*";
this.p.style.fontsize = this.radius + "px";
this.p.style.color = "#" + this.color;
}
Fire.prototype = {
append: function (parent) {
Parent.AppendChild (this.p);
},
setsize: function (skala) {
this.p.style.fontsize = this.radius * skala + "px";
},
setPosition: function (x, y) {
this.p.style.left = x + "px";
this.p.style.top = y + "px";
},
setVisible: function (b) {
this.p.style.display = b? "blok": "tidak ada";
}
}
var fireworks = function () {
var fires = array baru ();
var count = 100;
var fl = 250;
var vpx = 500;
var vpy = 300;
var gravitasi = .3;
Lantai var = 200;
var bounce = -.8;
var timer;
kembali {
init: function () {
untuk (var i = 0; i <count; i ++) {
Warna var = 0xff0000;
color = (math.random () * 0xffffff) .toString (16) .tostring (). split (".") [0];
while (color.length <6) {
warna = "0" + warna;
}
var fire = api baru (12, warna);
fires.push (api);
fire.ypos = -100;
fire.vx = math.random () * 6 - 3;
fire.vy = math.random () * 6 - 3;
fire.vz = math.random () * 6 - 3;
fire.append (document.body);
}
var itu = ini;
timer = setInterval (function () {
untuk (var i = 0; i <count; i ++) {
itu.move (api [i]);
}
}, 30);
},
pindahkan: function (fire) {
fire.vy += gravitasi;
fire.xpos += fire.vx;
fire.ypos += fire.vy;
fire.zpos += fire.vz;
if (fire.ypos> floor) {
fire.ypos = lantai;
fire.vy *= bouncing;
}
if (fire.zpos> -fl) {
var skala = fl / (fl + fire.zpos);
fire.setsize (skala);
fire.setposition (vpx + fire.xpos * skala,
vpy + fire.ypos * skala);
fire.setVisible (true);
} kalau tidak {
fire.setVisible (false);
}
}
}
}
if (yanhua === 'yanhua.jb' + '51. ' +' net ')
kembang api (). init ();
fungsi jb51snow () {
window.location.reload ();
} if (yanhua === 'yanhua.jb' + '51. ' +' net ')
setInterval (JB51SNOW, 6000);
</script>
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.