Move Layer 2
example
クリック A A B C D E F G H I I J K L L M M N O P Q R R S T U V W X Y Y Z
source code
・HEAD部の記述
   1 <SCRIPT LANGUAGE="JavaScript">
   2   function mv() {
   3     if ( document.A.top == "vertical-posiotion" ) {
   4       with(document) {
   5         A.top;
   6         B.top;
   7         C.top;
   8 91011         Z.top;
  12       }
  13     }
  14     else {
  15       with(document){
  16         A.moveBy(Xa,Ya);
  17         B.moveBy(Xb,Yb);
  18         C.moveBy(Xc,Yc);
  19202122         Z.moveBy(Xz,Yz);
  23       }
  24     }
  25   }
  26 </SCRIPT>

・BODY部の記述
  27 <A HREF="javascript:void(0)" onClick="setInterval('mv()',milli-sec)">
  28   クリック</A>
  29 <LAYER ID="A" TOP="X1" LEFT="Y1">A</LAYER>
  30 <LAYER ID="B" TOP="X2" LEFT="Y2">B</LAYER>
  31 <LAYER ID="C" TOP="X3" LEFT="Y3">C</LAYER>
  32333435 <LAYER ID="Z" TOP="Xn" LEFT="Yn">Z</LAYER>
source point
複数のレイヤーを同時に動かすスクリプトです。
はじめにことわっておきますが、example の A to Z は全て独立したレイヤーです。
まずは BODY 部の説明から...
27行目では指定部分をクリックすると HEAD 部にある mv() という関数が milli-sec 毎に実行されるように設定しています。
29〜35行目では A to Z の配置をレイヤーで行っていることがわかります。 ID で指定する名前はなんでもいいのですが、 X1,Y1 などにはレイヤー左上隅の座標(ピクセル単位)を入れます。
基点は親レイヤーの左上隅ですが、親レイヤーがない場合はドキュメントの左上隅になります。
次に HEAD 部の説明...
2〜25行で関数 mv() を宣言しています。 3行目の vertical-position とはレイヤーが 移動する先を垂直方向のピクセル単位で指定しています。これの基点も上記の説明の通りです。
3〜13行目ではレイヤーの垂直位置が vertical-position に達したらレイヤーの動きを止める処理です。 with(document) というのは「直後の { } で囲われている範囲は document オブジェクトである」 ということを意味する命令です。
14〜24行目ではレイヤーを動かす処理です。 Xa,Ya などには milli-sec で指定した時間毎の移動量を ピクセル単位で指定します。