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

■ JavaScript - サンプル集(257種類) - DHTML
   - 画面上に1文字ずつ出てくる文字列

画面上に文字が1文字ずつ出てきます。。
機能的には、フォームに1文字ずつ出てくる文字列やステータスバーに1文字ずつ出てくる文字列と同じです。

サンプルを見る
ソースを保存する
(右クリック→「対象をファイルに保存」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

	//表示する文字を指定
	moji='文字が1文字ずつ出てきます。';

	//文字が流れる欄の横幅を指定
	my_width=250;

	//文字が流れる欄の横位置を指定
	x_iti=340;
	//文字が流れる欄の縦位置を指定
	y_iti=160;

	//流れる早さを指定
	hayasa=150;

	a=0;
	hajime=0;
	len=1;
	function hyouji()
		{
		if(document.layers)
			{
			document.layers["lay0"].moveTo(x_iti,y_iti);
			document.layers["lay0"].clip.width=my_width;
			document.layers["lay0"].document.open();
			document.layers["lay0"].document.write(moji.substring(0,len));
			document.layers["lay0"].document.close();
			}

		else if((document.getElementById) && (!document.all))
			{
			document.getElementById("lay0").style.left=x_iti;
			document.getElementById("lay0").style.top=y_iti;
			document.getElementById("lay0").style.width=my_width;
			document.getElementById("lay0").innerHTML=moji.substring(0,len);
			}

		else if(document.all)
			{
			document.all("lay0").style.pixelLeft=x_iti;
			document.all("lay0").style.pixelTop=y_iti;
			document.all("lay0").style.width=my_width;
			document.all("lay0").innerHTML=moji.substring(0,len);
			}

		len=(moji.length < len)?0:len+1;
		clearTimeout(a);
		a=setTimeout('hyouji();',hayasa);
		}

//-->
</script>

</head>

<body onLoad="hyouji();">

<span id="lay0" style="position:absolute;visibility:visible;"></span><br>

 ・
 ・
 ・

</body></html>


[ 解説 ]

まず表示させたい文字を書き換えます。
上から7行目の「文字が1文字ずつ出てきます。」にお好きな文字をお書き下さい。

次に、文字列が表示される部分の幅を決めます。
上から11行目の「my_width=250;」の「250」の部分を変えてください。
高さを変えたい場合は、その下の「my_height=15;」の「15」を変えてください。

文字列が表示される位置を変えるには、 上から15行目の「x_iti=300;」と上から16行目の「y_iti=160;」の数値を変えてください。
またそのちょっと上の「x_purasu=40;」と「y_purasu=0;」を変えても変わります。

文字列が現れる早さを変えたい場合は、上から9行目の「hayasa=150;」の数値を変えて下さい。


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

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