3.ちょっと改造してみる

3-1 星の数を増やしてみる

星の数が1つでは、寂しいので、もう少し増やしてみましょう。これは、特に難しいことはありません。ただ、ちょっとソースコードが長くなります。

3-2 星3つのサンプル

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

3-3 ソースコード


<font color="#eeee33" size="20" id="text0">★</font>
<font color="#eeee33" size="20" id="text1">★</font>
<font color="#eeee33" size="20" id="text2">★</font>
<script type="text/javascript"><!--
	var y0 = 0;
	var y1 = 0;
	var y2 = 0;
	var ts0 = document.getElementById("text0").style;
	var ts1 = document.getElementById("text1").style;
	var ts2 = document.getElementById("text2").style;
	setInterval(
		function()
		{
			ts0.position = 'absolute';
			ts1.position = 'absolute';
			ts2.position = 'absolute';
			ts0.top = y0+'px';
			ts1.top = y1+'px';
			ts2.top = y2+'px';
			ts0.left = 300+'px';
			ts1.left = 400+'px';
			ts2.left = 500+'px';
			y0 += 20;
			y1 += 20;
			y2 += 20;
			if(y0>600) y0 = 0;
			if(y1>600) y1 = 0;
			if(y2>600) y2 = 0;
		}
	,100);
	void(0)
// --></script>

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

基本的に、命令の数を増やすだけです。変数名は異なるものを使っておきます。3つの星は、ほとんど同じ動きをしますが、横座標だけは違う数字を与えています。

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

< 2.とりあえず作ってみる □ ホームページ □ 4.もっと増やしてみる >