HOME 　>>> 　HTML整理ノート 　>>> DHTML -- 基本編　　　応用編

mousedown位置までHTML要素の移動

ページ内の任意の位置をマウスダウンすれば、そこまでボールが移動します。マウスアップすれば、その地点で停止する。

　

　

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

<script language="JavaScript"><!--
function DownUp(){
  document.onmousedown = DownInit;
  document.onmouseup = MoveStop;
}

var ballx,bally,stepx,stepy,mousex;
function DownInit(){
  ballx = ball.style.posLeft;  //ﾎﾞｰﾙの現在Left位置(x座標)を取得
  bally = ball.style.posTop;   //ﾎﾞｰﾙの現在Top位置(y座標)を取得
  mousex = event.x;		//mousedown位置のx座標
  mousey = event.y;		//mousedown位置のy座標
  //Left方向とTop方向の、ﾎﾞｰﾙの現在位置とmousedown位置の距離を比較し、
  //大きいほうの数値を変数stepに格納する。
  step = Math.max(Math.abs(mousex - ballx),Math.abs(mousey - bally));
  //上のstep数から、Left方向、Top方向の１回の移動量を計算する。
  stepx = (mousex - ballx)/step;
  stepy = (mousey - bally)/step;
  
  if(mousex < document.body.clientWidth)timerID = setInterval("BallMove()",2);
}
function BallMove(){
  ball.style.posTop = bally;
  ball.style.posLeft = ballx;
  if(ball.style.posLeft == mousex)clearInterval(timerID);
  bally += stepy;
  ballx += stepx;
}
function MoveStop(){
  clearInterval(timerID);
}
//--></script>
</head>

<body onload="DownUp()">
<IMG id="ball" style="position:absolute;top:100;left:50" 
		border="0" src="../images/bt0710.gif">

end(最終更新:12/11/12)