前回のmoveLAYER(idName,x,y)は、指定されたx,yの位置へ一気に移動するための関数だ。でも、たまには、現在位置を基点にして右へ10ピクセル移動したいということもある。そこで、今回は、相対位置移動用のクロスブラウザな汎用関数moveByLAYER(idName,offsetx,offsety)を作ってみた。
*
|
moveByLAYER( 'レイヤ−名' , x方向ピクセル数 , y方向ピクセル数 )
|
|
Win n4 n6 moz e4 e5 e6 , Mac n4 n6 moz e4.5 e5 , Linux n4 n6 moz
|
|
レイヤーの現在位置を起点として指定したピクセル分だけ位置を移動させるためのサンプルファンクション。NN4では専用のメソッドmoveBy(x方向px,y方向px)を使い、IE4ではx,y方向へ移動させるプロパティpixelLeftとpixelTopへ+=を使ってx方向pxとy方向pxをピクセル(整数)で代入している。たとえばpixelLeft=10ならブラウザ画面左端(または、属するブロックの左端)から10ピクセルの位置へ移動するが、pixelLeft+=10だと現在のレイヤー位置に10足す、つまり右方向へ10ピクセルの位置へ移動するという意味になる。NN6,IE5+では、現在の座標を取得してからleft=x座標とtop=y座標をpxで代入している。
|
<script language='JavaScript'>
<!--
function moveByLAYER(idName,offsetx,offsety){
if(document.getElementById){ //Moz,NN6,IE5+用
var oj = document.getElementById(idName).style
oj.left = ( parseInt(oj.left) + offsetx ) + 'px'
oj.top = ( parseInt(oj.top) + offsety ) + 'px'
}
else if(document.all){ //IE4用
document.all(idName).style.pixelLeft += offsetx
document.all(idName).style.pixelTop += offsety
}
else if(document.layers){ //NN4用
document.layers[idName].moveBy(offsetx,offsety)
}
}
//-->
</script>
<!--クリックすると↓このレイヤ−が移動する-->
<div id = "test0"
style="position : relative ;
left : 0px ; top : 0px ;
<!--↑IE5+/NN6はインラインへ必須-->
font-size : 24pt ;
">
<a href="javascript:moveByLAYER('test0',200,0)">動くよ</a>
</div>
|
|
|
|
上記サンプルは、リンククリックのタイミングで moveByLAYER('test0',200,0) を起動し、"test0"というDIVを x方向へ200ピクセル移動している(y方向へは0なので動かさない)。moveLAYER()の中では自動的にブラウザを検知してIE4やIE5、NN4、Mozillaなどそれぞれの方法で自動的にクロスブラウザな処理をして移動してくれるようになっている。
ちなみに、IE5やNN6/Mozillaでは基点の初期位置がleft,topへセットされていないので、あらかじめ明示的にleftとtopの値をインラインで指定しておくなどの処置が必須となる。
|
|
★次のページにサンプルと応用スクリプトを用意しました。 |
次のページ→|
