動く背景画像

BackgroundPosition

下のボタンで背景を動かせます

Sample Source......................................................................>>>

<SCRIPT language="JavaScript"><!--
　var xpos = 0;  //横位置の初期値
　function MoveBack(){
  　　dv.style.backgroundPosition = xpos;
  　　xpos += 3;
　}

　var x = 2;
　var y = 1;
　var timerID;
　function MoveBg(mx,my){
  　　content.style.backgroundPosition = x + " " + y;
  　　x += mx;
  　　y += my;
　}
　function MoveOp(opx,opy){
  　　clearInterval(timerID);
 　　 opx2 = opx;
  　　opy2 = opy;
  　　timerID = setInterval('MoveBg(opx2,opy2);',200);
　}
//--></script>
</head>
<body onload="setInterval('MoveBack();',100);">

<div id="content" style="background-image : url(../../images/bg/kaimen.jpg);">

<div id="dv" style="font:bold 24pt Verdana;text-align: center; 
　　background-image : url(../../images/bg/niji.jpg);">BackgroundPosition</div>

<p class="sample">下のボタンで背景を動かせます<BR>
  <button onclick="MoveOp(0,2);">[下に動く]</button><BR>
  <button onclick="MoveOp(0,-2);">[上に動く]</button><BR>
  <button onclick="MoveOp(2,0);">[右に動く]</button><BR>
  <button onclick="MoveOp(-2,0);">[左に動く]</button><BR>
  <button onclick="MoveOp(2,2);">[右下に動く]</button><BR>
  <button onclick="MoveOp(2,-2);">[右上に動く]</button><BR>
  <button onclick="MoveOp(-2,-2);">[左上に動く]</button><BR>
  <button onclick="MoveOp(-2,2);">[左下に動く]</button><BR>
  <button onclick="MoveOp(0,0);">[停止]</button>
</p>
</div>