Javascriptについて質問致します。

複数の文字列を
1)スクロールイン・スクロールアウト
2)フェードイン・フェードアウト
DIVタグで囲った枠内に上記の方法を用いて表示し続ける2つのスクリプトを
Javascriptを用いて作成したいと考えております。
一つの文字列を上記方法で表示するソースは見つけることはできたのですが、
複数の文字列を順々に表示しループしていくものは見つけられませんでした。
参考になるコードをお教えいただけないでしょうか?
動作できる環境は多ければ多いほど良いですが、
最低条件としてWindowsのInternet Explorer及びMozilla Firefoxで動作できれば良いです。
よろしくお願いいたします。

回答の条件
  • 1人10回まで
  • 登録:2007/03/16 18:57:19
  • 終了:2007/03/18 11:19:05

ベストアンサー

id:SALINGER No.1

SALINGER回答回数3454ベストアンサー獲得回数9692007/03/16 20:37:53

ポイント250pt

フェードインフェードアウトのサンプル作って見ました。

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
cnt = 0;
cnt2 = 0;
inout = "in";
myArray = new Array("文字を","変えて","フェードイン","フェードアウト","させます")
function strFade(str) {
	c = str.charAt(cnt);
	if(inout == "in") cnt++; else cnt--;
	document.all["ID"].style.color = "#"+c+c+c+c+c+c;
	if(cnt == 15) inout = "out";
	if(cnt == 0){
		inout = "in";
		document.all["ID"].innerHTML = myArray[cnt2];
		cnt2++;
		if(cnt2 == 5) cnt2 = 0;
	}
	setTimeout("strFade('" + str + "')",100);
}
//-->
</SCRIPT>
</HEAD>
<BODY bgcolor="#ffffff" onLoad="strFade('fedcba9876543210')">
<SPAN id="ID">サンプル</SPAN><BR><BR>
</BODY>
</HTML>

同じような方法でスクロールもできると思います。

id:federal

ご回答ありがとうございます。

確認させていただいたところフェードイン・アウトについて動作させることができました。

その上でさらに質問なのですが、

1)<body>タグを修正する必要を無くすことは不可能でしょうか?

 (<head>~</head>内でユーザー関数を作成し、<body>内でそれを挿入することだけで表示されるということは可能でしょうか?)

2)内の文字列を表示をせずに、最初からJavascript内で指定した文字列を表示することは可能でしょうか?

また、スクロールイン・アウトは言葉足らずで誠に申し訳ないのですが、

スクロールイン後一定時間(3秒程度)停止し、その後アウトしていくことが希望なのですが、

一定時間停止させる方法がわかりませんでした。

よろしければご掲示願えないでしょうか?

よろしくお願いいたします。

2007/03/16 21:47:59

その他の回答(3件)

id:SALINGER No.1

SALINGER回答回数3454ベストアンサー獲得回数9692007/03/16 20:37:53ここでベストアンサー

ポイント250pt

フェードインフェードアウトのサンプル作って見ました。

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
cnt = 0;
cnt2 = 0;
inout = "in";
myArray = new Array("文字を","変えて","フェードイン","フェードアウト","させます")
function strFade(str) {
	c = str.charAt(cnt);
	if(inout == "in") cnt++; else cnt--;
	document.all["ID"].style.color = "#"+c+c+c+c+c+c;
	if(cnt == 15) inout = "out";
	if(cnt == 0){
		inout = "in";
		document.all["ID"].innerHTML = myArray[cnt2];
		cnt2++;
		if(cnt2 == 5) cnt2 = 0;
	}
	setTimeout("strFade('" + str + "')",100);
}
//-->
</SCRIPT>
</HEAD>
<BODY bgcolor="#ffffff" onLoad="strFade('fedcba9876543210')">
<SPAN id="ID">サンプル</SPAN><BR><BR>
</BODY>
</HTML>

同じような方法でスクロールもできると思います。

id:federal

ご回答ありがとうございます。

確認させていただいたところフェードイン・アウトについて動作させることができました。

その上でさらに質問なのですが、

1)<body>タグを修正する必要を無くすことは不可能でしょうか?

 (<head>~</head>内でユーザー関数を作成し、<body>内でそれを挿入することだけで表示されるということは可能でしょうか?)

2)内の文字列を表示をせずに、最初からJavascript内で指定した文字列を表示することは可能でしょうか?

また、スクロールイン・アウトは言葉足らずで誠に申し訳ないのですが、

スクロールイン後一定時間(3秒程度)停止し、その後アウトしていくことが希望なのですが、

一定時間停止させる方法がわかりませんでした。

よろしければご掲示願えないでしょうか?

よろしくお願いいたします。

2007/03/16 21:47:59
id:SALINGER No.2

SALINGER回答回数3454ベストアンサー獲得回数9692007/03/17 00:07:55

ポイント250pt

bodyタグからではなく、window.onload から呼び出せばいいですね。

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
cnt = 0;
cnt2 = 0;
inout = "in";
str = "fedcba9876543210";
myArray = new Array("文字を","変えて","フェードイン","フェードアウト","させます")
function strFade() {
	document.all["ID"].innerHTML = myArray[cnt2];
	c = str.charAt(cnt);
	if(inout == "in") cnt++; else cnt--;
	document.all["ID"].style.color = "#"+c+c+c+c+c+c;
	if(cnt == 15) inout = "out";
	if(cnt == 0){
		inout = "in";
		cnt2++;
		if(cnt2 == 5) cnt2 = 0;
	}
	setTimeout("strFade(' + str + ')",100);
}
window.onload = strFade;
//-->
</SCRIPT>
</HEAD>
<BODY>
<SPAN id="ID"></SPAN><BR><BR>
</BODY>
</HTML>
id:SALINGER No.3

SALINGER回答回数3454ベストアンサー獲得回数9692007/03/17 01:01:46

ポイント250pt

上のコードの18行目無駄なコードになってました。

setTimeout("strFade()",100);

と置き換えてください。


スクロールの方も作って見ました。

サンプルなのでご期待にそえるか分かりませんが、参考程度に。

space は全角スペースを20入れています。

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
cnt = 1;
cnt2 = 0;
cnt3 = 0;
myArray = new Array("文字を","変えて","スクロール","させます","しかも、とまります");
space = "                    ";
msg = space + myArray[cnt3];
function strIn() {
	cnt2 = cnt + 20;
	document.all["ID"].innerHTML = msg.substring(cnt,cnt2);
	if(cnt < 20){
		cnt++;
		setTimeout("strIn()",100);
	}else{
		setTimeout("strOut()", 3000);
	}
}
function strOut() {
	cnt2 = cnt + 20;
	document.all["ID"].innerHTML = msg.substring(cnt,cnt2);
	if(cnt < msg.length){
		cnt++;
		setTimeout("strOut()",100);
	}else{
		cnt3++;
		if(cnt3 == 5) cnt3 = 0;
		msg = space + myArray[cnt3];
		cnt = 1;
		setTimeout("strIn()",100);
	}
}
window.onload = strIn;
//-->
</SCRIPT>
</HEAD>
<BODY>
<SPAN id="ID"></SPAN><BR><BR>
</BODY>
</HTML>
id:federal

ご回答ありがとうございます。

上記二つ拝見させていただいたところ、期待通りの動作を確認できました。

(後出しじゃんけんみたいな格好になり誠に申し訳ございません)その上でさらに質問なのですが、

外部ファイル化は可能でしょうか?

Javascriptについてはあまり詳しくはないながら検索をしてみたところ、

~.onloadがあると外部ファイルにすることはできないようですが・・・。

2007/03/17 08:27:32
id:SALINGER No.4

SALINGER回答回数3454ベストアンサー獲得回数9692007/03/18 10:03:17

ポイント250pt
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT src="script.js" type="text/javascript"></SCRIPT>
</HEAD>
<BODY>
<SPAN id="ID"></SPAN>
</BODY>
</HTML>

外部ファイル script.js

<!--
cnt = 1;
cnt2 = 0;
cnt3 = 0;
myArray = new Array("文字を","変えて","スクロール","させます","しかも、とまります");
space = "                    ";
msg = space + myArray[cnt3];
function strIn() {
	cnt2 = cnt + 20;
	document.all["ID"].innerHTML = msg.substring(cnt,cnt2);
	if(cnt < 20){
		cnt++;
		setTimeout("strIn()",100);
	}else{
		setTimeout("strOut()", 3000);
	}
}
function strOut() {
	cnt2 = cnt + 20;
	document.all["ID"].innerHTML = msg.substring(cnt,cnt2);
	if(cnt < msg.length){
		cnt++;
		setTimeout("strOut()",100);
	}else{
		cnt3++;
		if(cnt3 == 5) cnt3 = 0;
		msg = space + myArray[cnt3];
		cnt = 1;
		setTimeout("strIn()",100);
	}
}
window.onload = strIn;
//-->

これでIEで動作するようですが。

id:federal

Firefoxのみで確認しており、さらに文字コードが正しく判断されていなかったので

myArrayの部分にエラーが発生し動かなかったようです。

(お恥ずかしながら、Firefoxのエラーコンソール機能を

只今見つけましてわかった次第でございます。)

正しく文字コードを指定したところ、期待通りの動作を確認できました。

ご回答いただきまして誠にありがとうございました。

2007/03/18 11:13:23

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません