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 ・
9 ・
10 ・
11 Z.top;
12 }
13 }
14 else {
15 with(document){
16 A.moveBy(Xa,Ya);
17 B.moveBy(Xb,Yb);
18 C.moveBy(Xc,Yc);
19 ・
20 ・
21 ・
22 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>
32 ・
33 ・
34 ・
35 <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 で指定した時間毎の移動量を
ピクセル単位で指定します。