WEST MiRa(1,739 Byte)
JavaScript(1,601 Byte)

■ JavaScript - サンプル集(257種類) - フェード
   - フェードインVer4(テーブル)

画面が読み込まれた時に、テーブルの背景色がフェードインして表示されるスクリプトです。
このバージョンでは、お好きな色でフェードインさせる事が出来ます。
使用する色は、出来るだけ濃度が違うものをご使用下さい。
IE5以降、NN6以降限定です。

サンプルを見る
ソースを保存する
(右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。)
ソースを見る
解説を見る





[ ソース ]

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<script language="JavaScript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp

	//フェードイン開始時の背景色を指定する
	start_color="8f7e68";

	//フェードイン終了時の背景色を指定する
	end_color="f2e2cc";

	//フェードインの進行を決める早さ
	//遅くしすぎるとフェードインに見えなくなる
	times=50;

	iro="0123456789abcdef";
	haji1=eval("0x"+start_color.substring(0,2));
	haji2=eval("0x"+start_color.substring(2,4));
	haji3=eval("0x"+start_color.substring(4,6));
	haji11=eval("0x"+end_color.substring(0,2));
	haji22=eval("0x"+end_color.substring(2,4));
	haji33=eval("0x"+end_color.substring(4,6));
	if(start_color<end_color)
		{
		kazu1=Math.ceil((haji11-haji1)/14);
		kazu2=Math.ceil((haji22-haji2)/14);
		kazu3=Math.ceil((haji33-haji3)/14);
		}
	else 
		{
		kazu1=-Math.ceil((haji1-haji11)/14);
		kazu2=-Math.ceil((haji2-haji22)/14);
		kazu3=-Math.ceil((haji3-haji33)/14);
		}
	my_time=0;
	kazu=0;
	function fade_in()
		{
		if(((document.getElementById) && (!document.all)) || (document.all))
			{
			if(kazu==0)
				{
				if((document.getElementById) && (!document.all))
					document.getElementById("lay0").style.backgroundColor=start_color;
				else if(document.all)
					document.all("lay0").style.backgroundColor=start_color;
				}
			haji1+=kazu1;
			haji2+=kazu2;
			haji3+=kazu3;
			start_color=haji1.toString(16)+haji2.toString(16)+haji3.toString(16);
			if((document.getElementById) && (!document.all))
				document.getElementById("lay0").style.backgroundColor="#"+start_color;
			else if(document.all)
				document.all("lay0").style.backgroundColor="#"+start_color;
			kazu++;
			clearTimeout(my_time);
			if(kazu < 12)my_time=setTimeout('fade_in()',times);
			else 
				{
				if((document.getElementById) && (!document.all))
					document.getElementById("lay0").style.backgroundColor="#"+end_color;
				else if(document.all)
				document.all("lay0").style.backgroundColor="#"+end_color;
				}
			}
		}

//-->
</script>

</head>

<body onLoad="fade_in();">

<table border="1" id="lay0" style="position:relative;visibility:visible;">
<tr>
<td>
WEST MiRaのトップページです。<br>全コンテンツに繋がっています。<br>
</td>
<td>
JavaScriptのトップページです。<br>基礎講座とサンプル集があります。<br>
</td>
</tr>
</table>

</body></html>


[ 解説 ]

上から5行目の「8f7e68」の部分に、フェードインが始まる最初の色を設定してください。
次の6行目の「f2e2cc」の部分に、フェードインが終了する最後の色を設定してください。
それ以外の色は、自動的に算出します。

使用する色は、出来るだけハッキリ違う色をご使用下さい。
近似色を使うと、正常にフェードインできません。

例えば濃い緑色と薄い緑色ならOKですが、薄い緑色と薄い黄緑色ではフェードインが潰れます。

また上から7行目の「times=50;」の数値を書き換えると、フェードインする早さが変わります。

テーブル内のセル数などは、お好きなようにカスタマイズしてください。
大きさやセル間の間隔も、ごく普通にご変更下さい。

ただし1行目の
<table border="1" id="lay0" style="position:relative;visibility:visible;">
赤字部分は変更しないでください。


バナー、リンクについて  ,   利用規約  ,   ヘルプ

Copyright (C) 1998-2007 WEST MiRa. All rights reserved.