| ポイント |
<![CDATA[
document.write(styl+sy[i]+"px;left:"+sx[i]+"px;' name='snow"+i+"'>");
sy[i] += sp[i];
if (sy[i] > scrny) sy[i] = -10;
document.images["snow"+i].style.top = sy[i];
]]>
|
| 説 明 |
雪を移動させるには、あらかじめ配列にX,Y座標を代入しておきタイマーを使ってY座標を加算します。ページ構築時に雪の数だけdocument.writeを使ってimgタグごと出力します。この時にname属性で「名前+番号」(snow1,snow2,snow3...)も出力します。この名前を使って描画時にdocument.images[名前+番号]で参照を行います。スタイルのY座標を増加させることにより雪が降っているように見えます。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>雪を降らせる</title>
</head>
<body bgcolor="black" leftmargin="0" topmargin="0" onLoad="setInterval('moveSnow()',100)">
<img src="xmas.jpg" width="800" height="600" style="position:absolute:top:0px;left:0px;z-index:1;">
<script language="JavaScript"><!--
sx = new Array();
sy = new Array();
sp = new Array();
num = 25;
scrnx = 800;
scrny = 600;
function snowWrite()
{
styl = "<img src='snow.gif' style='position:absolute;width:8px;height:8px;z-index:3;top:";
for (i=0; i<num; i++)
{
sx[i] = Math.floor(Math.random()*800);
sy[i] = Math.floor(Math.random()*600);
sp[i] = Math.floor(Math.random()*5) + 1;
document.write(styl+sy[i]+"px;left:"+sx[i]+"px;' name='snow"+i+"'>");
}
}
function moveSnow()
{
for (i=0; i<num; i++)
{
sy[i] += sp[i];
if (sy[i] > scrny) sy[i] = -10;
document.images["snow"+i].style.top = sy[i];
}
}
snowWrite();
// --></script>
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
雪を降らせる