calendar

S M T W T F S
      1
2345678
9101112131415
16171819202122
23242526272829
30      
<< September 2018 >>

categories

archives

profile

商品の紹介について

このブログではアフェリエイトを利用して管理人おすすめの紹介をしておりますが、実際の取引はお客様とリンク先商品提供者との間で行われ、当ブログ並びに管理人は一切の責任を負いかねますのでご了承ください。お取引に関して生じる問い合わせは、お取引先までご連絡ください。

JavaScript・右の端から左の端へ絵の移動

0
      今回は、画像を移動したいの思いを実現しました。
     やり方は、絶対座標のX値を一番右端から順番に減算する方法をとりました。
     ところで、絶対座標の指定はスタイルシートによって行わなければなりませんので、JavaScript内でスタイルを指定する方法を知っておく必要があります。
     例えば「A」と言うidの画像の左端のX値は
        document.all.A.style.pixelLeft
    と表します。画像「A」を画面の右端に持って行きたい場合は、
        document.all.A.style.pixelLeft = document.body.offsetWidth;
    と書きます。
     ここから画像「A」を一定時間間隔毎に左に少しづつ移動して行きます。この方法は、「17.2つのタイマー(その2)」(→こちら)で学んだsetIntervalメソッドを使います。setIntervalメソッドで時間間隔と実行する関数を指定し、その関数は、画像が一定距離動く様に作ります。又、この関数では、画像が画面の左端一杯まで移動したらclearIntervalで動きを止めます。
     この様にして作ったプログラムが、下のものです。
    js61サンプル
    右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例

     ここで、ちょっと遊び心が出て来まして、下の様なアニメを作って、これを移動させてみる事にしました。いわば「千鳥足のよしじいさん」とでも言いましょうか。
    千鳥足アニメ

     最初のプログラムサンプルのカメラ写真の代わりにこのアニメを使う様に指定し、移動幅はアニメのスキップ歩幅、時間間隔はアニメの1周期に設定しました。又、JavaScriptを外部ファイル化しました。
     まずHTML文書は下の通りです。「skipanime.gif」と言うのがアニメ画像です。
    js62サンプル

     次にJavaScript文書は下の通りです。移動幅を140px、時間間隔を1400ms(1.4秒)にしています。
    js63サンプル

    右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例

     今回は、JavaScriptによるスタイルシートのコントロールで絶対座標をコントロールしました。
     次回も絶対座標ネタをもう少し続けて、マスターしたいと思います。

    なお、ホームページの「JavaScriptのabc」もアップデイトしました。こちらからどうぞ→


    コメント
    コメントする








       
    この記事のトラックバックURL
    トラックバック