|
★こんなことが出来ます(サンプル) | JavaScriptでDHTMLを使うと文字や画像やフォームなどHTML要素の位置を自由に変更することができる。画面外の位置へ変更することで見えなくしたり、連続して位置を変えることで動いているように見せることも可能だ。今回は、とりあえず、移動をクロスブラウザに実現するため基本的な汎用関数moveLAYER(idName,x,y)を作ってみた。
*
|
moveLAYER( 'レイヤ-名' , x座標 , y座標 )
|
|
Win n4 n6 moz e4 e5 , Mac n4 n6 moz e4.5 e5 , Linux n4 n6 moz
|
|
レイヤーを指定した位置へ移動させるためのサンプルファンクション。 NN4ではレイヤ-を移動させるメソッドmoveTo(x座標,y座標)を使い、IE4ではx,y方向へ移動させるプロパティpixelLeft=x座標とpixelTop=y座標、NN6,IE5ではleft=x座標とtop=y座標を使っている。このx座標,y座標の部分へ「ブラウザ左端からの位置」と「ブラウザ上端からの位置」をピクセル(整数)で指定すればそこへ移動させることができるわけだ。
|
<script language='JavaScript'>
<!--
function moveLAYER(idName,x,y){
if(document.getElementById){ //Moz,NN6,IE5用
document.getElementById(idName).style.left=x
document.getElementById(idName).style.top=y
}
else if(document.all){
document.all(idName).style.pixelLeft=x //IE4用
document.all(idName).style.pixelTop=y
}
else if(document.layers)
document.layers[idName].moveTo(x,y) //NN4用
}
//-->
</script>
<!--クリックすると↓このレイヤ-が移動する-->
<div id = "test0"
style="position : relative ;
font-size : 24pt ;
">
<a href="javascript:moveLAYER('test0',200,0)">動くよ</a>
</div>
|
|
|
|
上記サンプルは"test0"というDIVを
リンククリックのタイミングで moveLAYER('test0',200,0) を起動し、x方向へ200ピクセル移動している(y方向へは0なので動かさない)。moveLAYER()の中では自動的にブラウザを検知してIE4やIE5、NN4、Mozillaなどそれぞれの方法で自動的にクロスブラウザな処理をして移動してくれるようになっている。
ちなみに、この場合、"test0"へCSSの position : relative (またはabsolute)を指定することはNN4では必須だが、IEやNN6/Mozillaでは無くても動作する。また、relativeとした場合は現在レイヤーがある場所からの相対位置へ移動するが、absoluteとした場合は画面上端/左端からの位置へ移動する。
|
|
★次のページにサンプルと応用スクリプトを用意しました。
|
次のページ→|
シリーズ目次 |