スクロールの仕組み  

スクロールの仕組みについて考えてみましょう!!

文字が右から左に流れているように見せるため、次のような方法を使用しています。

  1. 最初にメッセージを表示させます。
    ”あいうえお”のようなイメージと考えて下さい。
  2. 次に前の1文字分減らして、最後に空白を1文字増やしたものを表示させます。
    ”いうえお ”です。これで、”あ”は消えて、”いうえお”は左にスクロールしたように見えます。
  3. この動作を繰り返させることで、メッセージが流れている見えるのです。

では、実際のScriptを解説します。

  1. 最初に表示させる文字を定義します。
    msg="Script Makerをご利用戴き、ありがとうございます。"
  2. 表示文字の後ろに空白を付加します。
    msg= msg + " ";//ここでは、1つしか表示できませんが個数を増やします。ユーザーが見るブラウザの横サイズが一定でないため(求める方法もないが、指定したサイズでページを開かせることは可能)いろいろと試してみる以外にきちんとした個数はわかりません。この個数で、メッセージが全部表示されて、次の表示までの間が決められます。
  3. 表示速度(スクロール)を指定します。
    speed=170;//単位は1/1000秒
  4. ここから表示及び繰り返しです。
    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文字移動させて、そのままのデータを表示させます。これで、流れているように見えます。

どうですか?プログラムは単純ですが奥が深いですね〜!!