- ベストアンサー
どんなタグを使えば・・・？？
どこかのホームページで、 タイプのように文字が表れて、そして表示されたらまたタイプのように消える。すると次は違う文がまたタイプで表れて、消える。最後の文までいくと、今度はまた最初に戻る。 というようなページを見ました。これはどのようなタグを使えば良いのでしょう。 html講座などを調べて見たけれど、基本的な事ばかりで分かりませんでした。ご存知の方がいたら、教えてください。お願いします。
- JavaScript
- 回答数3
- ありがとう数6
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
ちょっと作ってみました。 こんな感じでしょうか? <head> <title></title> <script type="text/javascript"><!-- msgs= new Array(); msgs[0]="一つ目のメッセージ"; msgs[1]="二つ目のメッセージ"; msgs[2]="三つ目のメッセージ"; msgs[3]="四つ目のメッセージ"; /* 表示するメッセージを定義します。 メッセージの数がこれよりも多い場合は、「msgs[x]="メッセージ"」の要領で、配列の要素を追加してください。 逆にこれより少ない場合は、配列の要素を削ってください。 */ n=0; m=0; function typeWriter(){ // 文字を順次表示する関数 disptxt=msgs[m].substr(0,n)+"＿"; if (document.getElementById){ document.getElementById("msgfield").innerHTML=disptxt; } else { document.f1.msgbox.value=disptxt; } if (n==msgs[m].length){ setTimeout("wipeOff()",5000);// 5000ミリ秒(5秒)後に、文字を消去する関数を呼び出し } else { n++; setTimeout("typeWriter()",120); // 120ミリ秒後にこの関数を再起 } } function wipeOff(){ // 文字を消去する関数 disptxt=msgs[m].substring(0,n)+"＿"; if (document.getElementById){ document.getElementById("msgfield").innerHTML=disptxt; } else { document.f1.msgbox.value=disptxt; } if (n==0){ m++; if (m==msgs.length){ m=0;} typeWriter(); } else { n--; setTimeout("wipeOff()",75); // 75ミリ秒後にこの関数を再起 } } window.onload=typeWriter; //--></script> </head> <body> <div id="msgfield" style="width: 100%; text-align: center;"><form name="f1"><input type="text" name="msgbox" size="60" style="border: none; text-align: center;" readonly></form></div> </body> </html> テキストを順次表示し、一つのメッセージを表示し終えるごとに5秒間待ってから、バックスペースで消すようにメッセージを消去していきます。 メッセージを消去し終えたら、次のメッセージを同様に表示していき、それを繰り返して最後のメッセージまで行ったら、始めのメッセージに戻ります。 DOMに対応しているブラウザでは、body内のdiv要素の中のHTMLを直接書き換えていきます。 DOMに対応していないブラウザでは、div要素の中のformにそれを表示していきます。 なお、スクリプト自体は、テキストの表示内容を調整するだけのものです。 先の回答へのお礼にある、「真ん中から広がっていくように文字が現れたり」する表示は、スタイルシートの中央寄せ(text-align: center;)をdiv要素に適用することで調整しています。 参考になれば幸いです。
その他の回答 (2)
- spinuch
- ベストアンサー率25% (28/110)
ako's cyber....にもあったような気がしますが、 私のよく使っている「Javascript kit.com」から、 タイピングのＪＳを紹介します。 snocraがどのように使うかよく分らなかったので、 果たして気に入ってもらえるかどうかは気にもしていないので「こんなん、ちゃうわー！」と言われても責任は取れません。 フリーですので、自由に使っていいみたい。（自己責任でお願い。）一応私が使うときにはリンクぐらいは貼ってました。 英語サイトですが、＜body＞に入れるところですよ。 とか、ここからは＜head＞に入れてねーと言う感じで、むずかしいことは書いていないので、「英語わからーん」と悩まないでね。 以下のサイトもこのサイトからのものです。 http://www.javascriptkit.com/cutpastejava.shtml ↑ これは、free jsのトップページ http://www.javascriptkit.com/script/script2/typetext.shtml
お礼
あぁ・・・。とても近いものがありました！！ だけどっ・・・ごめんなさい！イメージと少し違って・・・。 文字が表れる周りの囲みがいらないのです。 そして、文字が消える時も文字が表れた時のように消えていくのです。 ついでに、真ん中から広がっていくように文字が現れたり・・・。 我侭でごめんなさい。でもとても参考になりました! 教えていただきありがとうございました。
- abayama
- ベストアンサー率48% (38/79)
文字が現れるのは、ステータスバーでしょうか、それともページの中でしょうか? 該当ページがわからないので自信がありませんが、マーキーのことでしょうか? 説明ページのURLを紹介しておきます。
お礼
文字が表れるのはページ内です。 説明不足でごめんなさい・・・。 教えていただきありがとうございました。
お礼
ありがとうございます！！ とてもイメージ通りなものでした！参考にさせて頂きます。 本当にありがとうございました！