 ホーム KeyNavi対応方法 [0] JavaScript＠Keynavi.Netトップ
[1] レイヤーを移動
|
・サイトマップ [Shift-S] |
 |
■ レイヤーを移動：kl_layer_moveto,by(id,x,y)
【レイヤーを移動「kl_layer_moveto,by()」＜keynavi_tools.js】
//-----------------------------------------------------------------------------
//kl_layer_moveto(id,x,y)/moveby(id,dx,dy)
//返り値：成功時は１失敗時は０
//id：対象となるレイヤー(オブジェクト)かそのID
//x,y：移動先の座標
//dx,dy：移動量
//-----------------------------------------------------------------------------
function kl_layer_moveto(id,x,y){
var e=kl_getelem(id); if(!e) return 0;
if(KL_NS4) e.moveTo(x,y);
else if(document.getElementById){ e.style.left=x; e.style.top=y; }
else if(document.all){ e.style.pixelLeft=x; e.style.pixelTop=y; }
else return 0;
return 1;
}
function kl_layer_moveby(id,dx,dy){
var e=kl_getelem(id); if(!e) return 0;
if(KL_NS4) e.moveBy(dx,dy);
else if(document.getElementById){
var x=kl_toint(e.style.left); if(isNaN(x)) return 0;
var y=kl_toint(e.style.top ); if(isNaN(y)) return 0;
e.style.left=x+dx;
e.style.top =y+dy;
}
else if(document.all){ e.style.pixelLeft+=dx; e.style.pixelTop+=dy; }
else return 0;
return 1;
}
通常「e.style.left」は「"200px"」等のように文字列になるのが普通ですが 上記のように数値を代入してもOKです。
【kl_layer_moveto/by()を使ったサンプル】
<script language="javascript" src="http://www.keynavi.net/files/keynavi_ja.js"></script>
<script language="javascript" src="http://www.keynavi.net/files/keynavi_tools.js"></script>
.....
<a href="javascript:void(0)" onclick="kl_layer_moveto('lay1',100,50); return false;">座標(200,100)に移動</a>
<a href="javascript:void(0)" onclick="kl_layer_moveby('lay1',100,50); return false;">(200,100)だけ移動</a>
.....
<div style="position:relative; ..." id="lay1">レイヤー「lay1」です。</div>
レイヤーを(100px,50px)だけ斜め方向に移動させて見ます。
レイヤー「lay1」です。
|
Netscape4.xにも対応したい場合は スタイルシートで
「position:absolute」か「position:relative」と指定します。
関連：Netscape4でのレイヤー処理の問題(＜JavaScriptバグ＆回避法リスト) |
|
【JavaScript@Keynavi.Net ：
レイヤー編：基本
】
「Ctrl-矢印」でフォーカスを上下左右に移動できます。
|
| トップへ戻る [1] | Back[Q] ・Top[W] ・Up[E] ・PgUp[R] ・Focus[Ctrl-矢印] |
|
|
ホーム KeyNavi対応方法 [0] JavaScript＠Keynavi.Netトップ
[1] レイヤーを移動
|
・サイトマップ [Shift-S] |