文字をスクロールさせる(1回だけ)
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
<!--
var i = 0;
var str = "        ";			// 適度に間隔を空けます
str += "ぐるぐるどーん";			// 実際に表示する文字

function one_scroll() {
	var flag = document.forms[0].text1.value = str.substring(i++, str.length);
	if (flag) setTimeout("one_scroll();", 200);
}
// -->
</script>
</head>
<body>
<form action="#">
<input type="text" name="text1" value="">
<input type="button" value="表示する" onclick="one_scroll();">
</form>
</body>
</html>

substring() によって変数 str のインクリメントされた i 番目の文字から最後の文字を取得します。これを setTimeout() によって文字列がある間繰り返し実行することにより、変数 i がインクリメントされますのでスクロールしているように見えます。

この例では、指定したフォームに表示します。

文字をスクロールさせる(ループ)
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
<!--
var str = "ぐるぐるどーん ";

function str_scroll() {
	window.status = str;
	str = str.substring(1) + str.charAt(0);		// 変化させる文字列の取得
	setTimeout("str_scroll();", 200);
}
window.onload = str_scroll;
// -->
</script>
</head>
<body>
  :
  :
</body>
</html>

はじめに取得する変数 str の値は「ぐるぐるどーん 」です。str.charAt(n) で変数 str の n 文字目(charAt(0) の 0 は1文字目)の文字列を取得します。

1番最初に関数が呼ばれたときの変数 str は「ぐるぐるどーん 」ですが、 str.substring(1) の値が「るぐるどーん 」、str.charAt(0) の値が「ぐ」になりますので、1回目の処理が終了する時の変数 str の値は「るぐるどーん ぐ」ということになります。

次に setTimeout() によって2回目の処理時の変数 str の値は「るぐるどーん ぐ」(上記で最初の変数 str が変化したため)なので、str.substring(1) の値は「ぐるどーん ぐ」、str.charAt(0) の値は「る」になります。よって、変数 str の値は「ぐるどーん ぐる」ということになります。

この処理がその都度代入されますので、文字列がスクロールしているように見えます。また、str2 = str2.substring(1) + str2.charAt(0); を str2 = str2.substring(1); だけとするとループはしません。

この例では、ステータスバーに表示します。

文字をスクロールさせる(回数制限)
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
<!--
var j = 0;
var str = "        ぐるぐるどーん";

function limit_scroll() {
	document.title = str;
	str = str.substring(1) + str.charAt(0);
	var stop1 = setTimeout("limit_scroll();", 200);

	if (j++ >= str.length * 3) clearTimeout(stop1);	// ループさせたい回数を入れてください
}
window.onload = limit_scroll;
// -->
</script>
</head>
<body>
  :
  :
</body>
</html>

上記と同じですが、何回ループしたかをカウントして if 文で条件に合ったら、clearTimeout() を使用してループを止めます。ループは繋がっている文字列が1番左側から消えた時が1回です。

この例では、ブラウザのタイトルバーに表示します。(ループが終了したらもとのタイトルに戻るようにしています)

文字をスクロールさせる(途中から文字を替える)
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
<!--
var n = 0;
var str = "        ぐるぐるどーん";

function change_scroll() {
	document.getElementById("scroll").innerHTML = str;
	str = str.substring(1) + str.charAt(0);
	setTimeout("change_scroll();", 200);

	if (n++ == str.length * 3) {			// ここに入れた回数をループして
		str = "        がちょーん";	// この文字列に切り替わります
	}
}
// -->
</script>
</head>
<body onload="change_scroll();">
<span id="scroll">&nbsp;</span>
  :
  :
</body>
</html>
 

上記のループを止めるものを少し変更して、指定したループ回数に達したら切り替わります。

この例では、指定したエレメントに表示します。

[PR] ホットペッパー