【JavaScript/DHTMLのポイント】

紙芝居

紙芝居を表示する枠を一つのレイヤ(DIV)に割り付けます。
紙芝居の絵を続けてそれぞれのレイヤ(DIV)に割り付けます。初期は見えないようにstyleでhide(hidden)の指定をします。各絵は幅が200、高さが180になるようここでは<tabel>タグを使っています。
bodyのloadが終わったところでIniSet関数を起動し、画面の幅／高さを求めます。画面の幅と各レイヤの幅から表示初期x位置（lx1とlx2）を求めます。
各レイヤの表示開始位置（xとy）を求め、MoveTo関数を使って各画面のレイヤを表示開始位置に移動後、画面枠のレイヤが見えるようにvisibilityをinheritに変更します。同じく最初の画面レイヤ（2）も見えるようにし、次ぎの画面はClipC関数で幅を左から0でクリップした後見えるように設定します。（実際は幅0なので見えない。）
タイマを起動し500mS後にOpenI関数を呼びます。OpenI関数は画面移動量（open）をチェックし200になっていなければopenを10加え表示中の画面をこの位置まで右に移動すると同時に右側を移動した分クリップします。また次ぎの画面を左からこの移動分まで表示するためクリップ量を変更します。これを繰り返すためタイマを50ms毎に起動し実行します。
画面を右端まで移動（open=200）した時はこの画面を見えなくし画面カウンタを進め３枚目の画面を0にクリップした後見えるようにします。再びタイムアウトを500msに設定し500ms絵を固定表示後上の動作で画面を移動します。
最後の画面が表示されたところでタイマをクリアし画面の移動を終了します。
再現ボタンではIniSet関数と同じように各画面の初期位置を決め、1枚目の画面を見えるようにし、2枚目の画面は0幅にクリップした後見えるようにし、他の画面は見えないようにした後タイマを起動してOpenI関数を呼びます。

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