画像切り替え

切り替える画像処理のために10のレイヤ（LP[0]～LP[9]）と、４つの切り替え境界マスク用のレイヤ（LM[0]～LM[3])を使い、それぞれの切り替えパターンに応じ表示の前後関係(Zorder)を利用し切り替えるようにしています。
ロード時にブラウザの種類の判定後、IniSet()関数がレイヤ名の取得をした後、Start()関数を起動します。
Start()関数は画像エレメントを取得し、画像とマスクのレイヤを初期位置に設定後、次の切り替えを起動するNext()関数を呼び出します。
Next()関数の引数は次の切り替えモードで、通常は乱数で切り替えモードを取得するNextMode()を指定します。
Next()関数は最前レイヤ(LP[9])と最奥レイヤ(LP[0])に現在表示中の画像を指定し、画像クリップ無しの状態に、マスクレイヤと残り画像レイヤを非表示状態にします。
その後乱数を使用して次に表示する画像番号をPcに設定し、Mstepを0に指定後　引数で指定された切り替えモードに対応した処理ルーチンSlide･()関数を呼び出します。
Slide1()関数は画像を上部から切り替え、境界にはモザイクをかける切り替え方法です。
最奥レイヤ(LP[0])の前回表示の画像を　奥から3番目のレイヤ(LP[2])に設定されたNext()関数指定の今回切り替え表示画像で順次置き換えます。境界部分にどちらのレイヤよりも手前にあるモザイクマスクのレイヤ(LM[2])を重ねて表示します。
Mstepが0の時は初期設定でNext()関数で設定された最前レイヤ(LP[9])は非表示にし、LP[0]はクリップ無し、LP[2]とLM[2]も初期クリップ状態にします。
その後Mstepを１増やしタイマーを起動し40ms後に再度Slide1()関数を呼びます。
Slide1()関数はMstepの値に応じ前回画像のLP[0]は上の方からClip()を使い非表示にし、今回画像のLP[2]は逆に上の部分から表示し、マスクのLM[2]は上から移動しながら境界部分に重ねますが、画像からはみ出す分はクリップして非表示にします。Mstepを１増加し再びタイマでSlide1()を起動します。
Mstepが66になったら最前レイヤLP[9]に今回の画像を貼り付け表示します。その後　次の表示切替のためNext()関数をタイマで起動します。
他の切り替え関数Slide2()～Slide12()の説明は省略します。ソースリストを見てください。
テスト表示用のボタンを押すとそれぞれのボタンの番号を引数としてNext()関数を呼び出しています。

Java Script事例集トップページへ

鴈野さんちのHomePage TOPへ

ご感想などは鴈野敏生まで。