技 巧 鍵 盤 ─ KeyNavi:キーボードを活用してホームページを快適に─    
キー割当表示[Shift-H]        
ホーム 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)
//返り値:成功時は1失敗時は0
//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-矢印」でフォーカスを上下左右に移動できます。

  - レイヤーの表示・非表示切替え:kl_layer_show/hide(id)
  - レイヤーを移動:kl_layer_moveto,by(id,x,y)
  - レイヤーを上下左右/中央寄せ:kl_layer_setpos(is,pos)
  - レイヤーの背景色を指定:kl_layer_setbgcolor(id,...)
  - レイヤーの背景画像を指定:kl_layer_setbgimage(id,...)
  - 前景色(文字色)変更:kl_layer_setfgcolor(id,...)
  - レイヤーの各種属性(位置,大きさ,...)を取得:kl_layer_xxx()
  - ウィンドウリサイズ時のNS4レイヤーバグ回避
  - レイヤーメニューとJavaScriptモジュール化

トップへ戻る [1]
ホーム KeyNavi対応方法 [0] JavaScript@Keynavi.Netトップ [1] レイヤーを移動 ・サイトマップ [Shift-S]
キー割当表示[Shift-H] ─ KeyNavi Project 2003 ─