| スクロールの仕組みについて考えてみましょう!! 文字が右から左に流れているように見せるため、次のような方法を使用しています。
- 最初にメッセージを表示させます。
”あいうえお”のようなイメージと考えて下さい。
- 次に前の1文字分減らして、最後に空白を1文字増やしたものを表示させます。
”いうえお
”です。これで、”あ”は消えて、”いうえお”は左にスクロールしたように見えます。
- この動作を繰り返させることで、メッセージが流れている見えるのです。
では、実際のScriptを解説します。
- 最初に表示させる文字を定義します。
msg="Script Makerをご利用戴き、ありがとうございます。"
- 表示文字の後ろに空白を付加します。
msg= msg + " ";//ここでは、1つしか表示できませんが個数を増やします。ユーザーが見るブラウザの横サイズが一定でないため(求める方法もないが、指定したサイズでページを開かせることは可能)いろいろと試してみる以外にきちんとした個数はわかりません。この個数で、メッセージが全部表示されて、次の表示までの間が決められます。
- 表示速度(スクロール)を指定します。
speed=170;//単位は1/1000秒
- ここから表示及び繰り返しです。
function scro() { //scroというユーザー関数を定義
msg=msg.substring(2,msg.length)+msg.substring(0,2);//文字の切り出し
変数名.substring(開始位置,終了位置)の指定で、開始位置から終了位置-1の文字列を抜き出します。上記の例ですと、最初の部分が”ript
Makerをご利用戴き、ありがとうございます。"に指定した空白の個数で、次の部分が、"Sc"です。これを連結させています。つまり元の文字を左に2文字分移動した文字列を作って、msgを置き換えています。
window.status = msg;//ステータスバーにmsgの内容を表示
setTimeout('scro()',speed);//指定時間毎に繰り返し(左に2文字移動させて、そのままのデータを表示させます。これで、流れているように見えます。
どうですか?プログラムは単純ですが奥が深いですね〜!!
|