SITEMAP [初めてのホームページ講座] [JavaScript , DHTML] [ステータススクロール]

Dynamic HTMLの参考書 Java Scriptの参考書

ステータススクロール

機能

ステータスバー(ブラウザの下の方)にメッセージをスクロールさせる技は周知のものです。 また同様に、1文字ずつ表示する方法も周知です。

この2つの技を合体させて、交互に実行します。 また、それぞれのスピードやインターバルなども自由に設定可能です。

利用方法

HEAD部分にスクリプトを記述します。 必要に応じて変数の内容を書き換えます。(下記参照)

この他、1文字ずつ表示、スクロールの入れ替え(初期は1文字ずつ、スクロールの順)や、 無限ループをしない設定なども可能です。

表示する文字
変数「Message」を適宜書き換えます。 ここでは「初めてのホームページ講座」としています。
スクロールの設定
スクロールをどこまで行うか、スクロール完了後のインターバルの時間に使えます。 指定した文字の左側に挿入していくスペースの数を指定します。
スクロールスピード
変数「ActTs」を変更します。単位はmsecで、大きくするほど遅くなります。
1文字ずつ表示スピード
変数「ActTc」を変更します。単位はmsecで、大きくするほど遅くなります。
その他のスピード
変数「ActT」を変更します。単位はmsecで、大きくするほど遅くなります。 これは、インターバル時間に関係します。
インターバル時間
変数「iEnd」を変更します。 「iEnd*actT」msecになります。大きくするほど長くなります。 これは、1文字ずつ表示からスクロールの入れ替えへ遷移する時間になります。
1文字ずつ表示、スクロールの入れ替え
57行目付近の「iType = 0;」で指定します。 0であれば1文字ずつ表示、2であればスクロールになります。 初期は0で1文字ずつ表示になっていますが、これを変更して2にした場合、 50行目付近の「iType = 3;」を0に、38行目付近の「iType = 1;」を3に変更します。
無限ループ
50行目付近の「iType = 3;」を99に変更することで、無限ループを解除できます。

対応ブラウザ

IE3,NN3以上

サンプル

サンプルを見る] [ダウンロード

[Go To Top]

ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="ja">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>ステータススクロール</title>

<script language="JavaScript">
<!--

var Message = "初めてのホームページ講座";
var sEnd = 130;					//スクロール完了するまでのスペース文字数
var ActTc = 100;				//1文字ずつ表示スピード
var ActTs = 50;					//スクロールスピード
var ActT = 100;					//その他のスピード
var iEnd = 10;					//インターバル時間

var iCur = 0;
var iScr = 0;
var iInt = 0;
var iType = 0;
var TimerID;

function Init(){
	iType = 3;
	Controll();
}

function Controll(){
	var i = 0;
	var sFlag = false;

	if(iType == 0){					//1文字ずつ表示
		sFlag = Curtain();
		if(!sFlag){
			iType = 1;
		}
		TimerID = setTimeout("Controll()",ActTc);
	}else if(iType == 1){			//インターバル
		iInt++;
		if(iInt >= iEnd){
			iType = 2;
		}
		TimerID = setTimeout("Controll()",ActT);
	}else if(iType == 2){			//横スクロール
		sFlag = Scroll();
		if(!sFlag){
			iType = 3;
				//無限の場合は1or3、完了する場合は99にする
		}
		TimerID = setTimeout("Controll()",ActTs);
	}else if(iType == 3){			//初期化
		iCur = 0;
		iScr = 0;
		iInt = 0;
		iType = 0;
			//初期に実行するタイプ 0=1文字ずつ表示、2=横スクロール
		TimerID = setTimeout("Controll()",ActT);
	}else if(iType == 99){			//完了
		clearTimeout(TimerID);
	}
}

function Curtain(){
	var i;
	var Comm = "";

	Comm = Message.substring(0,iCur);
	SetMess(Comm);

	iCur++;
	if(iCur > Message.length){
		return(false);
	}else{
		return(true);
	}
}

function Scroll(){
	var i;
	var Comm = "";

	for(i = 1; i <= iScr; i++){
		Comm += " ";
	}
	Comm += Message;
	SetMess(Comm);

	iScr++;
	if(iScr >= sEnd){
		return(false);
	}else{
		return(true);
	}
}

function SetMess(Mess){
	window.status = Mess;
}

// -->
</script>

</head>

<body onload="Init()">

ステータスバーにスクロール文字を表示します。

</body>
</html>
[Go To Top]

Last modified July,2000
Copyright(C)2000 T.Miyazaki , All Rights Reserved.