ページに雪を降らす  役に立つJavaScript & HTML
町工場ネット トップ | サイトマップ | 新規登録 | プライバシーポリシー | 相互リンクの方法 | 問い合わせ
 
 トップページ >> 役に立つJavaScript & HTML  > ページに雪を降らす

 

雪じゃないって?別に雪にする必要はないわけで、白にすれば雪になります。
ソースを見ましょう。

<TITLE></TITLE>
<SCRIPT language="javascript">
<!--
yoko=new Array();
tate=new Array();
sokudo=new Array();
kazu=25;    降ってくる数
gamenx=800;   画面の横の大きさ
gameny=1600;   画面のたての大きさ

for(i=0;i<kazu;i++){
yoko[i]=Math.floor(Math.random()*gamenx);
tate[i]=Math.floor(Math.random()*gameny);
sokudo[i]=Math.floor(Math.random()*15)+1;
落ちてくる速さ
document.write("<img src='gazou.gif' style='position:absolute;width:4px;height:4px;top:"
+tate[i]+"px;left:"+yoko[i]+"px;zIndex:3' name='i'>");

}
function tiratira(){
      for (i=0;i<kazu;i++){
     tate[i]+=sokudo[i];
     if(tate[i]>gameny) tate[i]=-20;
降り始めの位置
     document.images[i].style.top=tate[i];
     }
}
function s_time(){
タイマーを止めるためのものです。
clearInterval(TTID);
}
//-->
</SCRIPT></HEAD>
<BODY bgcolor="#000000" leftmargin="0" topmargin="0" onload="TTID=setInterval('tiratira()',100)" style="position:absolute;top:0px;left:0px;zIndex:1" text="#ffffff" onUnload="s_time()">


ややこしいので、変更するところに十分注意してください。なお、これを使うときは必ずソースをコピーしてください。上の表をコピーしてもうまくできません。青字のところは変更できます。緑字のところは特別な意味があります。

■kazu=25;                降ってくる数
この25が降ってくる数です、大きくすると振る数が増えます。

■gamenx=800;            画面の横の大きさ
gameny=1600;            画面のたての大きさ

gamenx 800は画面の横にどのくらいの幅に広がるか、という意味。800にすればだいたいページ全体に広がります。
gameny 1600は画面のたての範囲指定です。長いページなら値を大きくします。100づつ位徐々に増やして様子を見ないと、あまり大きな数字をいれると、いつまでたっても次の画像が降ってこなくなります。
この数字をうまく組み合わせると画面の一部だけに降らせることも可能です。

■sokudo[i]=Math.floor(Math.random()*15)+1; 落ちてくる速さ
ここの15を大きくするほどはやく降ってきます。

■gazou.gif
降らせる画像のファイル名です。同じフォルダにおきましょう。
そのあとの 4 というのは画像の大きさです。縦横の大きさです。大きくすると画像も大きくなります。元の画像はそのままで、ここの数字を大きくすれば画像も大きくなります。

■降り始めの位置を −20 にしています。画面の上のほうから降らせるためです。30とか40とかにすると画面の途中から降ってきます。タイトルをよけたりするときなどに指定しましょう。

■#000000
背景色の指定で、こうすると黒です。画像も指定できます。

■#ffffff
文字色の指定、背景が黒のときはなので、白にしてます。

このページのソースでは背景は指定していません。

一応白背景用の模様は作りましたので、画像の保存で保存すれば使えます。ファイル名は好きにしてください。







たとえば、赤のりんごを降らせるなら、gazou.gif を  apple4.gif にすればいいわけです。

onUnload="s_time()"
これはページを移動するときにタイマーを停止させるためのものです。忘れず書きましょう。

このページの上 
責任者:吉年伸之 住所:大阪府大東市寺川5-12-18  問い合わせ:support@sisakubankin.com