Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 riference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial

 1文字ずつ現れるタイトルを作成する

IE5.0以降のみ(Macintosh版IE5.0では表示されない場合があります)

JAVA Scriptを使って文字列を1文字ごとに時間をずらして表示するようにすると、タイプライターのように文字列を1文字ずつ画面に出現させることができます。ここでは、タイトルも自我1文字ずつ一定時間ごとに表示されるように設定する方法を考えてみましょう。

■ 文字列を表示させる関数の設定

1文字ずつ文字列を画面に表示するには、目的の文字列を変数に格納し、次に文字の表示方法(文字数やスピード)をJAVA Scriptで定義します。

<SCRIPT LANGUAGE="JavaScript">
<!--
title="Shirley's Pettit Case";
a=0
function moji(){
 if(a<=title.length){
 f=title.substring(0,a);document.all.wordstart.innerHTML=f;
 a++;}
 else{a=0
 }
 setTimeout("moji()",300);
}
</SCRIPT>

■ 文字を表示するタイミングの設定

上で設定した関数(振動幅の数値を少しずつ減らす)をいつ実行するかを設定します。

<BODY onLoad="moji()">

上例では、ホームページを読み込んだタイミングで実行するように設定しています。

■ 表示させる文字列の設定

表示する文字列の大きさなどを設定します。

<DIV ID="wordstart" STYLE="position:absolute; font-size:60px; color:#000080; font-weight:bold; width: 600px; height:60px; left: 128px; top: 181px;"></DIV>
例では、文字内容に「wordstart」というIDをつけ、文字列の表示位置の基準はabsolute、フォントサイズは60ピクセル、文字列は紺色の太字、表示領域は幅600ピクセル、高さ60ピクセルに設定しています
1文字ずつ文字列を表示させるには、JAVA Scriptの文字を取り出す「substring」メソッドと文字を表示する「innerHTML」プロパティを利用します。文字を取り出す順番は、変数を利用して1文字ずつ増やしながら、取り出した文字を表示させることがポイントです。
例では、表示する文字数より変数「a」の数値が大きくなった時点で「a」の数値を0に戻すことで作業を繰り返しています。

<<<戻る

R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box