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

ステータススクロール

機能

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

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

利用方法

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

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

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