菜鸟提问!!求算法!已知a,b,现在点鼠标a会向b游动,鼠标停,a会停下来

Question

通过设置对象的top及left来实现！

Answer 1

通过onmousemove事件来改变a的style.top及style.left

Answer 2

有点难度...俺找时间整一下...PS: 光会算法是不行滴, 还要非常熟悉DOM

Answer 3

点鼠标,a会向b游动---onclick事件改变a的style，
鼠标停，---什么时候动过？
a会停止---事件改变a的style。

Answer 4

<script language="JavaScript">
<!--
var obj1=obj2=p1=p2=null;
var id=0; //设置调用ID
var intval = 10; //单位豪秒,控制调用moveObj()的周期
var step = 5; //每次移动的像素,控制移动的速度window.onload=function()
{
obj1=document.getElementById("obj1");
obj2=document.getElementById("obj2");
p1={x:obj1.style.pixelLeft,y:obj1.style.pixelTop};
p2={x:obj2.style.pixelLeft,y:obj2.style.pixelTop};
}function moveObj()
{
{
if(p1.x<p2.x)
obj1.style.pixelLeft=p1.x+=step;
if(p1.y<p2.y)
obj1.style.pixelTop=p1.y+=step;
}
}document.onmousedown=function()
{
if(id==0)
id=setInterval("moveObj()",intval);
}
document.onmouseup=function(){clearInterval(id);id=0;}
//-->
</script>
按下鼠标a移动，释放鼠标移动停止，再按下则继续移动。
<img src="a.gif" id="obj1" alt="a" style="position:absolute;left:100px;top:100px;"/>
<img src="b.gif" id="obj2" alt="b" style="position:absolute;left:500px;top:500px;"/>

Answer 5

呵呵, 楼上好强....
要我的话起码得预先知道这些:
a.x, a.y, a.width, a.height
b.x, b.y, b.width, b.height

Answer 6

哈哈, 我想弄个可以这样的...<style type="text/css">
/* <![CDATA[ */
.MainTbl
{
 margin:5px 0px;
}.MainTbl tr td
{
 padding:2px;
}.MainTblTitle
{
 background-color:#F2F2F2;
 text-align:center;
 padding:5px 0px;
}.SolidBorder
{ 
 background-color:#FFFFFF !important; /*表格背景色绝对白色*/
 border-collapse: collapse; /*清除 IE 的默认边框*/
 border: 1px solid #999999;
}.TblSolidBorder
{ 
 background-color:#FFFFFF !important; /*表格背景色绝对白色*/
 border-collapse: collapse; /*清除 IE 的默认边框*/
 border: 1px solid #999999;
}.TblSolidBorder tr td
{
 padding:2px!important;
}.TblSolidBorder td, .TblSolidBorder th 
{
 border-top: 1px solid #999999; /* 设置 1px 比设置为 thin 通用 */
 border-right: 1px solid #999999;
 border-collapse: collapse; /*清除 IE 默认边框*/
 padding:2px;
}.Area
{
 width:40px;
 height:40px;
}
/* ]]> */
</style><table border="0" cellspacing="0" cellpadding="0" class="MainTbl TblSolidBorder" align="center">
 <tr>
  <td colspan="2" rowspan="2" align="center" valign="middle">
   <div id="LeftTopId">LeftTopId</div>
  </td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td colspan="2" rowspan="2" align="center" valign="middle">
   <div id="CenterTopId">CenterTopId</div>
  </td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td colspan="2" rowspan="2" align="center" valign="middle">
   <div id="RightTopId">RightTopId</div>
  </td>
 </tr>
 <tr>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
 </tr>
 <tr>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
 </tr>
 <tr>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
 </tr>
 <tr>
  <td colspan="2" rowspan="2" align="center" valign="middle">
   <div id="LeftMiddleId">LeftMiddleId</div>
  </td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td colspan="2" rowspan="2" align="center" valign="middle">
   <div id="AxisId" class="Area TblSolidBorder">AxisId</div>
  </td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td colspan="2" rowspan="2" align="center" valign="middle">
   <div id="RightMiddleId">RightMiddleId</div>
  </td>
 </tr>
 <tr>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
 </tr>
 <tr>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
 </tr>
 <tr>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
 </tr>
 <tr>
  <td colspan="2" rowspan="2" align="center" valign="middle">
   <div id="LeftBottomId">LeftBottomId</div>
  </td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td colspan="2" rowspan="2" align="center" valign="middle">
   <div id="CenterBottomId">CenterBottomId</div>
  </td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td colspan="2" rowspan="2" align="center" valign="middle">
   <div id="RightBottomId">RightBottomId</div>
  </td>
 </tr>
 <tr>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
  <td width="50" height="50">&nbsp;</td>
 </tr>
</table>