文字のフェードイン,フェードアウト.

Index

レイヤー機能とJavaSciptを組み合わせて,文字のフェードイン,フェードアウト表示を行うサンプルを作成しました.

[例]

	<form>
	<input type=button value="押してね" onclick="msgFade();">
	</form><p>
	<layer id="lyr" width=400 visibility = show></layer>		//(1)

	<script language="JavaScript">
	<!--
	var fade = true;
	function msgFade(){
		var color;
		var l = document.layers["lyr"];
		if( fade ){
			color = "fedcba9876543210";	
		}
		else 
		{
			color = "0123456789abcdef";
		}
		fade = ( fade ) ? false: true;
		for( i = 0; i < 16 ; i++ ){	
			c = color.charAt( i );			//(2)
			c = c + c + c + c + c + c;		//(3)
			l.document.open();
			l.document.fgColor = c;
			l.document.write( "<font size=7>Hello</FONT><BR>" );
			l.document.write( "<font size=7>My Name is</FONT><BR>" );
			l.document.write( "<font size=7>Motnari Morikawa</FONT><BR>" );
			l.document.close();
		}
	
	} 
	//-->
	</SCRIPT>
	

【解説】

(1)レイヤーの設定.表示領域の幅を400としました.もし表示位置を設定したいなら,top="",left=""オプションで設定して下さい.
(2)color文字列から,i番目の文字を取得します.
(3)ここで文字の表示色を設定します.たとえば,(2)で取得した文字列が"8"ならc="8"+"8"+"8"+"8"+"8";となり,c="888888"となります.

【実行結果】








1998(C) Motonari Morikawa