【JavaScript/DHTMLのポイント】
床屋さんサイン
- 床屋さんのサインは円筒を回転させて模様が上へ上がっていくように見せているが、ここでは模様を移動させることで円筒が回転しているように見せている。
- ロード時にブラウザの種類の判定後、IniSet()関数が画面サイズの取得をした後、初期設定をします。
- 初期設定では上の横棒は左側のクリップ30、右側のクリップ430で初期位置に設置します。
同じ様に下の横棒は左側のクリップ0、右側のクリップ400で初期位置に設置し、右の棒は上側のクリップ30、下側のクリップ280で初期位置に設置し、
右の棒は上側のクリップ0、下側のクリップ250で初期位置に設置します。
コーナーの画はどれも同じ球で、棒の端にこの球が少しかかるように配置されています。
- 棒の移動量はCcにあり、最初は0です。またインターバル毎の移動量はCstepで最初（正転時)は2です。
IniSet()関数の最後でインターバル75msごとにDisplay()関数が呼ばれるよう設定します。
- Display()関数では棒の移動量Ccが模様のピッチ30より大きい時はCcから30を引き、Ccが0より小さい時はCcに30を加えます。
その後上の棒はCxMove()関数で左右クリップを30-Cc,430-Ccにし、その分横位置をCcずらし棒の外枠は見かけ上移動しないようにしています。
また右の棒はCyMove()関数で上下クリップを30-Cc,280-Ccにし、その分縦位置をCcずらし棒の外枠は見かけ上移動しないようにしています。
同様に下の棒は左右クリップCc,400+Cc、右の棒は上下クリップCc,250+Ccにします。
これでCcが正の時は模様が右周りに移動するように見えます。
- フレームに配置されたボタン「停止」をクリックするとStop()関数が呼ばれ、Cstepを0にした上でインターバルタイマをクリアし模様の移動を停止します。
「逆転」ボタンをクリックするとRev()関数がよばれCstepを-2に設定しインターバルタイマを再起動することで模様が左周りで動くように見せます。
「正転」ボタンをクリックするとNor()関数がよばれCstepを2に設定しインターバルタイマを再起動します。
Java Script事例集トップページへ
鴈野さんちのHomePage TOPへ
ご感想などは鴈野 敏生 まで。