雪を降らせる


動作ブラウザ 【 IE:4.0  NN:6.0
Internet Explorer Netscape Navigator DreamPassport iCab
3.0x 4.0x 4.5 5.0x 5.5 2.0x 3.0x 4.0x 4.x 6.0 2 3 2.x
Windows × - × × × × - × -
Macintosh × - × × × × - - ×
UNIX - - - - - × × × × - - -
Dreamcast - - - - - - - - - - × × -

ポイント 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座標を増加させることにより雪が降っているように見えます。
サンプル <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!

写真素材 PIXTA