2.星を1つ降らせる

2-1 簡単なブログパーツ

細かいことは抜きにして、さっそく簡単なブログパーツを作ってみましょう。それでは、画面の上から星を落として見ます。

2-2 星1つのサンプル

ここにブログパーツを貼り付けています。何も表示されませんが、黄色い星が動いてると思います。さらに、数を増やせば、星が降ってくるブログパーツの出来上がりです。

2-3 ソースコード


<font color="#eeee33" size="20" id="text">★</font>
<script type="text/javascript"><!--
var y = 0;
var ts = document.getElementById("text").style;
setInterval(
	function()
	{
		ts.position = 'absolute';
		ts.top = y+'px';
		ts.left = 300+'px';
		y += 20;
		if(y>600) y = 0;
	}
,100);
void(0)
// --></script>

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

上のコードは、基本的に次のような構造になっています。


<font>文字</font>
<script><!--
(〜javascriptのプログラム〜)
// --></script>

ポイント1
fontタグのid属性で、動かしたいものに、名前を付けます。fontタグでなくても、id属性さえ付ければ何でもOKです。このid属性を指定して動かします。

ポイント2
javascriptプログラムは<script><!--/と/ --></script>の間に書きます。<!--/と/ -->は無くても動きますが、一応あった方が良いです。

ポイント3
document.getElementById("id属性").styleを通して、id属性に指定されたタグのスタイルにアクセスできます。いったん変数に代入していますが、直接書いてもOKです。スタイルにアクセスできれば、位置を変えたり、色を変えたり、見た目に関することはいろいろできます。

ポイント4
setInterval(関数,時間間隔)で、関数を時間間隔(ミリ秒)ごとに実行することができます。サンプルでは、function()が、100ミリ秒ごとに実行されています。

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

< 1.ブログパーツとは □ ホームページ □ 3.ちょっと改造してみる >