画面内でのオブジェクトの移動

<div>というタグ
  • <div>自身は特に何の意味も持たないタグです。

  • <div>〜</div>で囲まれた部分の位置を指定したり、
    スタイルシートを適用したりするのに用いられます。

書式

<div id="識別名" style="対象オブジェクトの表示形式">対象オブジェクト</div>

◆　style（表示形式）は、属性：値で指定し、複数の属性は；で区切る

属性意味値
POSITIONポジショニングの方法static（規定値：本来の位置）
relative（本来の位置からの相対位置指定）
absolute（絶対位置指定）
fixed（絶対位置に固定）
inherit（継承）
Z-INDEX要素同士が重なって表示される場合の重なりの順序整数（数値が大きなものほど前面）
VISIBILITY表示するしないvisible（規定値：表示する）
hidden（表示しない）
inherit（継承）
TOP上端からの距離10px のような単位付きの数値
50% のようなパーセント指定
または
auto（規定値：自動）
inherit（継承）
LEFT左端からの距離10px のような単位付きの数値
50% のようなパーセント指定
または
auto（規定値：自動）
inherit（継承）
width横幅10px のような単位付きの数値
50% のようなパーセント形式
または
inherit（継承）
height高さ10px のような単位付きの数値
50% のようなパーセント形式
または
inherit（継承）


オブジェクトの移動

準備　：　左から600Pix　上から150Pix　に鶴を置く 
<HTML> 
<HEAD> 
<META http-equiv="Content-Type" content="text/html; charset=x-sjis"> 
<TITLE>DIV</TITLE> 
</HEAD> 
<BODY BACKGROUND="sky.jpg" bgproperties="fixed"> 
<div id="dot1" style="POSITION: absolute; Z-INDEX: 0; VISIBILITY: visible; TOP: 150px; LEFT: 600px; width:1;"> 
<img src="tanchou03-o.gif" border="0"> 
</div> 
</BODY> 
</HTML>


document.getElementById(ID)
  • ID 属性で指定した名前で要素を参照します。

  • <div>〜</div>等で囲まれた部分のスタイルシートを適用したりするのに用いられます。

  • 下の例では、dot1というID部分のスタイルを指定しています。
    • ウィンドウの左端からの位置　：　style.left
    • ウィンドウの上端からの位置　：　style.top
移動　：　右から左へ 
<HTML>
<HEAD> 
<TITLE>Fish-2</TITLE> 
<SCRIPT LANGUAGE="JavaScript1.2"> 
var speed     = 100 ; // この値（ミリ秒）毎に画面が変わる
var tt=  800 ;
var pxa= 800 ; // 鶴のX方向位置(Pixel)
var pya= 100 ; // 鶴のY方向位置(Pixel)
var stp=   5 ; // 鶴の1回移動量(Pixel)

function move(t) 
{
  pxa = t   ;  //  下に移動させる場合には　pya を変更する 

  document.getElementById("dot1").style.left = pxa ;
  document.getElementById("dot1").style.top  = pya ;
}

function disp() 
{
  if(tt>=-160)
  {
    setTimeout("disp()", speed);
  }
  else
  {
    tt = 800  ; 
    setTimeout("disp()", speed);
  }
  tt=tt-stp ;
  move(tt) ;
}
</SCRIPT> 
</HEAD> 
<BODY BACKGROUND="sky.jpg" bgproperties="fixed"> 
<div id="dot1" style="POSITION: absolute; Z-INDEX: 2; VISIBILITY: visible; TOP: 150px; LEFT: 15px; width:1;"">
<img src="tanchou03-o.gif" border="0">
</div> 
<SCRIPT> 
disp() ;
</SCRIPT> 
</BODY> 
</HTML>




document.all[ID]
  • ID 属性で指定した名前で要素を参照します。

  • <div>〜</div>等で囲まれた部分のスタイルシートを適用したりするのに用いられます。

  • 下の例では、dot1というID部分のスタイルを指定しています。
    • ウィンドウの左端からの位置　：　style.pixelLeft
    • ウィンドウの上端からの位置　：　style.pixelTop

  • Internet Explorer 4.0 以降でのみ有効です。
移動　：　右から左へ 
<HTML>
<HEAD> 
<TITLE>Fish-2</TITLE> 
<SCRIPT LANGUAGE="JavaScript1.2"> 
var speed     = 100 ; // この値（ミリ秒）毎に画面が変わる
var tt=  800 ;
var pxa= 800 ; // 鶴のX方向位置(Pixel)
var pya= 100 ; // 鶴のY方向位置(Pixel)
var stp=   5 ; // 鶴の1回移動量(Pixel)

function move(t) 
{
  pxa = t   ;  //  下に移動させる場合には　pya を変更する 

  document.all["dot1"].style.pixelLeft = pxa ;
  document.all["dot1"].style.pixelTop  = pya ;
}

function disp() 
{
  if(tt>=-160)
  {
    setTimeout("disp()", speed);
  }
  else
  {
    tt = 800  ; 
    setTimeout("disp()", speed);
  }
  tt=tt-stp ;
  move(tt) ;
}
</SCRIPT> 
</HEAD> 
<BODY BACKGROUND="sky.jpg" bgproperties="fixed"> 
<div id="dot1" style="POSITION: absolute; Z-INDEX: 2; VISIBILITY: visible; TOP: 150px; LEFT: 15px; width:1;"">
<img src="tanchou03-o.gif" border="0">
</div> 
<SCRIPT> 
disp() ;
</SCRIPT> 
</BODY> 
</HTML>






素材