Grow Layer 1
example
◆クリックすると画像領域が拡大します◆
source code
・HEAD部の記述
1 <SCRIPT LANGUAGE="JavaScript">
2 <!--
3 var x = 125; var y = 125;
4 function growLay() {
5 Obj = document.layers["id"];
6 Obj.moveAbove(document.layers["name"]);
7 Obj.clip.left = x;
8 Obj.clip.top = y;
9 Obj.clip.width = 2*(125-x);
10 Obj.clip.height = 2*(125-y);
11 x = x-5;
12 y = y-5;
13 if (x<0) { return false; }
14 }
15 // -->
16 </SCRIPT>
・BODY部の記述
17 <A HREF="javascript:void(0)" onClick="setInterval('growLay()',milli-sec)">
18 コメント</A>
19 <LAYER ID="id" TOP="130" LEFT="100">
20 <IMG SRC="zippo.jpg" WIDTH="250" HEIGHT="250">
21 </LAYER>
22 <LAYER ID="name" TOP="130" LEFT="100" WIDTH="250" HEIGHT="250" BGCOLOR="black">
23 </LAYER>
source point
レイヤを拡大させるスクリプトだ。
はじめにことわっておくが、このサンプルの読み込み状態では画像の上に同じサイズの
黒いレイヤを重ねているため画像が非表示状態になっていることに注意してほしい。
まずは HEAD 部の説明から...
3 行目では、変数 x と y の値を設定している。これは画像の幅と高さの半分の値を
それぞれ設定したもので、画像が乗っているレイヤを中央から拡大させるために必要な
ものである。
4 〜 14 行は画像レイヤを拡大させる関数 growLay() の宣言である。
その内容は、5 行目で画像レイヤメソッドを変数 Obj に
入れている。これは本スクリプトでヘルプレイヤメソッドが何度も登場するためである。
6 行目はレイヤの上下を入れ替える命令で、A.moveAbove(B) と
いう形の場合は、「レイヤAをレイヤBの上に移動せよ」を意味する。
7 〜 10 行に clip というレイヤのプロパティがあるので、まずこれの説明をしておこう。
clip というプロパティはレイヤの表示領域をあらわすもので、clip.left と clip.top で
レイヤの左上隅の座標を指定し、clip.width でレイヤの表示幅、clip.height でレイヤの
表示高さをあらわす。このサンプルでは各プロパティの値を変数 x , y で扱っている。
最初に、この関数(growLay())が呼び出されたときは、3 行目で指定した値が x , y に
適用されるが、次の呼び出しからは 11 , 12 行目の計算結果が反映されることになる。
そのため、レイヤの表示領域が徐々に拡大するのである。
13 行目は レイヤが最大まで拡大したときに処理を止める命令(return false)である。
このサンプルでは x の値(clip.leftの値)で判断している。
次に BODY 部の説明をしよう。
17 行目では 指定部分をクリックすると HEAD 部にある growLay() 関数がミリ秒
(milli-sec)毎に実行されるように設定している。
19 〜 21 行で画像のレイヤを指定。このレイヤには幅と高さが250pixelの画像が乗っている。(zippo.jpg)
22 〜 23 行で画像の上に重なるレイヤーが、画像と同じ大きさになるように指定している。