moveByLAYER()
レイヤーの現在位置を起点として指定したピクセル分だけ位置を移動させるためのサンプルファンクションです。n4では専用のメソッド
moveBy(x方向px,y方向px)を使い、e4ではx,y方向へ移動させるプロパティ
pixelLeftと
pixelTopへ+=を使ってx方向pxとy方向pxをピクセル(整数)で代入しています。たとえばpixelLeft=10ならブラウザ画面左端から10ピクセルの位置へ移動しますが、pixelLeft+=10だと現在のレイヤー位置に10足す、つまり右方向へ10ピクセルの位置へ移動するという意味になります。e5,e6,n6,m1,o6では
leftと
topを使っています。
ieではposLeft,posTop(実数)も使えます。
*このファンクションをコピーして<script>と</script>の間にペーストしておくだけでこの機能をクロスブラウザに利用できるようになります。
*Mac/Linux版Opera6ではonclick="命令"だけだとリロードがかかり初期化してしまうのでonclick="命令 ; return false" という記述が必要です。
Cross-Browser のための Sample Function
//--レイヤ−名で処理する場合
Syntax : moveByLAYER('レイヤ−名',x方向ピクセル数,y方向ピクセル数)
function moveByLAYER(layName,offsetx,offsety){
if(document.getElementById){ //e5,e6,n6,n7,m1,o6,o7,s1用
var oj = document.getElementById(layName).style
oj.left=parseInt(oj.left)+parseInt(offsetx )+'px'
oj.top =parseInt(oj.top) +parseInt(offsety )+'px'
} else if(document.all){ //e4用
document.all(layName).style.pixelLeft += offsetx
document.all(layName).style.pixelTop += offsety
} else if(document.layers) //n4用
document.layers[layName].moveBy(offsetx,offsety)
}
Example
<script type='text/javascript'>
<!--
function moveByLAYER(layName,offsetx,offsety){
if(document.getElementById){ //e5,e6,n6,n7,m1,o6,o7,s1用
var oj = document.getElementById(layName).style
oj.left=parseInt(oj.left)+parseInt(offsetx )+'px'
oj.top =parseInt(oj.top) +parseInt(offsety )+'px'
} else if(document.all){ //e4用
document.all(layName).style.pixelLeft += offsetx
document.all(layName).style.pixelTop += offsety
} else if(document.layers) //n4用
document.layers[layName].moveBy(offsetx,offsety)
}
//-->
</script>
<!--↓このレイヤ−上のリンクをクリックすると移動します///////////-->
<div id="test"
style="position : absolute ;
left : 10px ;
top : 10px ;">
<a href="#" onclick="moveByLAYER('test',10,20);return false">
クリックすると現在の位置を起点として
<br>指定したピクセル分だけ移動します</a>
</div>
//--オブジェクト名で処理する場合
上記の関数をレイヤー名の代わりにオブジェクトで処理するようにしたもの。
ブラウザ毎の実装オブジェクト処理が別立てになるので関数がシンプルになる。
Syntax : moveByLAYERoj(オブジェクト,x方向ピクセル数,y方向ピクセル数)
function moveByLAYERoj(oj,offsetx,offsety){
if(document.getElementById){ //e5,e6,n6,n7,m1,o6,o7,s1用
oj.left=parseInt(oj.left)+parseInt(offsetx )+'px'
oj.top =parseInt(oj.top) +parseInt(offsety )+'px'
} else if(document.all){ //e4用
oj.pixelLeft += offsetx
oj.pixelTop += offsety
} else if(document.layers) //n4用
oj.moveBy(offsetx,offsety)
}
Example
<script type='text/javascript'>
<!--
function moveByLAYERoj(oj,offsetx,offsety){
if(document.getElementById){ //e5,e6,n6,n7,m1,o6,o7,s1用
oj.left=parseInt(oj.left)+parseInt(offsetx )+'px'
oj.top =parseInt(oj.top) +parseInt(offsety )+'px'
} else if(document.all){ //e4用
oj.pixelLeft += offsetx
oj.pixelTop += offsety
} else if(document.layers) //n4用
oj.moveBy(offsetx,offsety)
}
//--layNameで指定したオブジェクトを返す(必ずonload後に実行すること)
function getLayStyleOj(layName){
if(document.getElementById) //e5,e6,n6,n7,m1,o6,o7,s1用
return document.getElementById(layName).style
else if(document.all) //e4用
return document.all(layName).style
else if(document.layers) //n4用
return document.layers[layName]
}
//-->
</script>
<!--↓このレイヤ−上のリンクをクリックすると移動します///////////-->
<div id="test"
style="position : absolute ;
left : 10px ;
top : 10px ;">
<a href="#" onclick="moveByLAYERoj(getLayStyleOj('test'),10,20);return false">
クリックすると現在の位置を起点として
<br>指定したピクセル分だけ移動します</a>
</div>