6.画像を使ってみる

6-1 クルクル星

さて、だいぶ良くなって来たのですが、もう一押しということで、星を画像にしてみましょう。せっかく画像を使うのだから、どうせならアニメーションGIFを使って、くるくる回転させて見ましょう。

6-2 クルクル星のサンプル

ここに、ブログパーツを貼っています。本体は見えませんが、くるくる回る星が降っていると思います。

6-3 ソースコード


<script type="text/javascript"><!--
var n=20;
var i;
var x = new Array();
var y = new Array();
var vy = new Array();
var ts = new Array();
document.open();
for(i=0;i<n;i++)
{
	document.write('<img src="img/star'+Math.floor(Math.random()*5)+'.gif" id="text'+i+'" style="position: absolute; left: -100;" />');
}
document.close();
for(i=0;i<n;i++)
{
	x[i] = Math.floor(Math.random()*document.body.clientWidth)-50;
	y[i] = Math.floor(Math.random()*document.body.clientHeight);
	vy[i] = 10+Math.floor(Math.random()*20);
	ts[i] = document.getElementById("text"+i).style;
}
setInterval(
	function()
	{
		for(i=0;i<n;i++)
		{
			ts[i].position = 'absolute';
			ts[i].top = y[i]+'px';
			ts[i].left = x[i]+'px';
			y[i] += vy[i];
			if(y[i]>document.body.clientHeight)
			{
				x[i] = Math.floor(Math.random()*document.body.clientWidth)-50;
				y[i] = 0;
				vy[i] = 10+Math.floor(Math.random()*20);
			}
		}
	}
,100);
void(0)
// --></script>

6-4 ソースコードの解説

赤色が変更した部分です。と言っても3箇所だけです。うち2つは、速度を調節しただけです。ただ、画像は別に用意しておく必要があります。もちろん、画像は何でもOKです。今回は、5色のアニメーションGIFを作って、どの画像を使うかは、ランダムに選択してみました。

ポイント1
id属性が指定されていれば、タグは何でもOKです。imgタグも例外ではありません。

このサンプルを改造して、自分のブログパーツを作りたいって人がいたら、自由に使ってくれてOKです。でも、画像は各自用意してください。

< 5.ランダムに表示してみる □ ホームページ □ 7.停止ボタンを付ける >