この記事では、空からカラフルな雪片を散乱させる効果を達成するためのJavaScriptの方法について説明します。参照のためにそれを共有してください。特定の分析は次のとおりです。
下の図に示すように、最初に実行効果を見てみましょう。
完全なソースコードは次のとおりです。
次のようにコードをコピーします。<
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Title> JavaScriptカラフルな雪片が空から落ちる</タイトル>
<style type = "text/css">
.jb51snow {display：block;オーバーフロー：隠し;フォントサイズ：12px;位置：絶対};
ボディ{背景：＃000;マージン：0px}
HTML {Overflow：Hidden;背景：＃000;}
{色：白、テキストゼロ：なし}
.jb51title {color：red; height：140px; width：800px; margin：0px auto; text-align：center}
</style>
</head>
<body>
<script type = "text/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 = {
追加：function（parent）{
parent.appendChild（this.p）;
}、
SetSize：function（scale）{
this.p.style.fontsize = this.radius * scale + "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？ 「ブロック」：「なし」;
}
}
var fireworks = function（）{
var fires = new array（）;
var count = 100;
var fl = 250;
var vpx = 500;
var vpy = 300;
Var Gravity = .3;
var floor = 200;
var Bounce = -.8;
varタイマー;
戻る {
init：function（）{
for（var i = 0; i <count; i ++）{
var color = 0xff0000;
color =（math.random（） * 0xffffff）.toString（16）.toString（）。split（ "。"）[0];
while（color.length <6）{
color = "0" + color;
}
var fire = new fire（12、color）;
fires.push（fire）;
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 that = this;
Timer = setInterval（function（）{
for（var i = 0; i <count; i ++）{
that.move（fires [i]）;
}
}、30）;
}、
移動：function（fire）{
fire.vy +=重力;
fire.xpos += fire.vx;
fire.ypos += fire.vy;
fire.zpos += fire.vz;
if（fire.ypos> floor）{
fire.ypos = floor;
fire.vy *=バウンス;
}
if（fire.zpos> -fl）{
var scale = fl /（fl + fire.zpos）;
fire.setsize（スケール）;
fire.setposition（vpx + fire.xpos *スケール、
vpy + fire.ypos *スケール）;
fire.setVisible（true）;
} それ以外 {
fire.setVisible（false）;
}
}
}
}
if（yanhua === 'Yanhua.jb' + '51。 ' +' net '）
花火（）。init（）;
関数jb51snow（）{
window.location.reload（）;
} if（yanhua === 'yanhua.jb' + '51。 ' +' net '））
SetInterval（JB51SNOW、6000）;
</script>
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。