人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: federal
●カテゴリ:ウェブ制作
✍キーワード:Internet Explorer JavaScript Mozilla Firefox Windows コード
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● SALINGER
●250ポイント ベストアンサー

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

<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>

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

◎質問者からの返答

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

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

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

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

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

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

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

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

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

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

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


2 ● SALINGER
●250ポイント

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>

3 ● SALINGER
●250ポイント

上のコードの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>
◎質問者からの返答

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

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

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

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

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

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


4 ● SALINGER
●250ポイント
<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で動作するようですが。

◎質問者からの返答

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

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

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

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ