求一个js例子实现屏幕上的一张图片在鼠标点击屏幕上一点后图片移动到那点，类似于游戏中人物的移动（最好有动作的，用js怎么实现？）

<img src="http://192.168.0.7:8300/images/logo_home.gif" style="position:absolute;" id="person" /><script>
document.onclick = function(){
person.style.top = event.clientX
person.style.left = event.clientY
};
</script>

解决方案 »

  1.   

    一楼的代码移动应该是可以的了,如果想要动作就设置在移动时把图像换成一个GIF动画这个动画自己去找或是做了
    要不你找几张静态的图轮番换起走
    如果只想一张图用JS要实现小人那种走路的动作是不可能的
      

  2.   

    下面是一张图片移动到鼠标点击位置的代码
    <html> 
    <head> 
    <title>Test</title> 
    <script language="javascript">
    var ox,oy,ex,ey;
    var stepx,stepy,TimeSpan=20;
    var ts=null;
    document.onclick=Handler;
    var MoveObj=null;
    window.onload=function()
    {
      MoveObj=document.getElementById("pic");
    }
    function Handler(e)
    {
      clearInterval(ts);//
      e=e||event;
      var pic=document.getElementById("pic");
      ox=parseInt(pic.style.left);
      oy=parseInt(pic.style.top);
      ex=e.clientX;
      ey=e.clientY;
      if(ex>ox)
      {
        stepx=1;
      }
      else
      {
        stepx=-1;
      }
      stepy=(ey-oy)/(ex-ox);//根据比例算出y方向的移动速度
      ts=setInterval("movePic()",TimeSpan);
    }
    function movePic()
    {     
       ox+=stepx;
       oy+=stepy;
       if(stepx>0)
       {     
         if(ox<=ex)
           MoveObj.style.left=ox+"px";
         else
           MoveObj.style.left=ex+"px";
       }
       else
       {
         if(ox>=ex)
           MoveObj.style.left=ox+"px";
         else
           MoveObj.style.left=ex+"px";
       }
       if(stepy>0)
       {     
         if(oy<=ey)
           MoveObj.style.top=oy+"px";
         else
           MoveObj.style.top=ey+"px";
       }
       else
       {
         if(oy>=ey)
           MoveObj.style.top=oy+"px";
         else
           MoveObj.style.top=ey+"px";
       }
       if(parseFloat(MoveObj.style.top)==parseInt(ey)&&parseFloat(MoveObj.style.left)==parseInt(ex))
         clearInterval(ts);
    }
    </script> 
    </head> 
    <body> 
    <img src='1.jpg' id="pic" style='position:absolute;left:0px;top:0px;width:120px;height:100px'/>
    </body> 
    </html>