ようこそ
我が家の
Home Pageへ
        

【JavaScript/DHTMLのポイント】

スライド表示


  1. 「ようこそ」「我が家の」「Home Pageへ」の文字列一つずつを一つのレイヤ(DIV)に割り付けます。途中で自動改行されないよう<nobr>タグを使っています。
  2. この3つのレイヤは初期は見えないようにstyleでhide(hidden)の指定をします。ここでは各文字列の色と大きさもstyleで指定しています。
  3. bodyのloadが終わったところでIniSet関数を起動し、画面の幅/高さの他 上の3つのレイヤの幅/高さを求めます。画面の幅と各レイヤの幅から最終表示位置(lxとly)を求めます。
  4. 各レイヤの表示開始位置(xとy)を求め、MoveTo関数を使って各レイヤを表示開始位置に移動後3つのレイヤが見えるようにvisibilityをinheritに変更します。
  5. StartMove関数では画面位置が先頭になるようスクロールした後、表示開始位置と最終表示位置の差を100分割し1回の移動量(pxとpy)を算出した後タイマを起動します。
  6. タイムアウト毎にMoveXY関数が現在のレイヤ位置に1回分の移動量を加えた新しい位置に3つのレイヤを移動します。カウントを1増やし再びタイマを起動します。
  7. MoveXY関数では100回目のタイムアウトでタイマをクリアし移動を終了します。
  8. 各ボタンには初期位置を決めた後StartMove関数を呼び出すStart1,2,3関数がonClick()で呼び出されるようにしてあります。
  9. T.Miyazakiさんの「初めてのホームページ講座」、Yoochanさんの「DHTML」などのホームページを参考にさせて頂きました。

Java Script事例集トップページへ
鴈野さんちのHomePage TOPへ
ご感想などは鴈野 敏生 まで。