日期:2014-05-16  浏览次数:20382 次

js 模拟鼠标控制小人移动
今天写了一个类似于鼠标控制小人移动的JS代码,直线移动的时候还好,斜线移动的时候就会出现转直角的情况。。。。还有,本来想把这个写成插件的形式,但是在div的click事件出现了问题。代码如下:高手们呐,help me!Help Me me me me ........ 

代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>js模拟鼠标控制小人移动</title>
 <script type="text/javascript" language="javascript" src="js/jquery-1.4.2.js"></script>
<script language="javascript" type="text/javascript">
var strObjID,//移动divID
  strFrameID,//外框ID
  moveX,//移动div X轴移动事件
  moveY,//移动div Y轴移动事件
  unitLeft,//移动div css的Left属性值
  unitTop,//移动div css的Top属性值
  unitWidth,//移动div的宽
  unitHeight,//移动div的高
  frameWidth//框架div宽
  ,frameHeight,//框架div高
  step;//移动div每次移动的像素
function Unit(objID,objFrameID)
{
  strObjID=objID;
  strFrameID=objFrameID;
  var oUnit=document.getElementById(objID);
  var oFrame= document.getElementById(objFrameID);
   
  if(oUnit.style.left=="")
  {
  unitLeft = 0;
  } 
  else
  {
  unitLeft = parseInt(oUnit.style.left);
  }
   
  if(oUnit.style.top=="") 
  {
  unitTop= 0;
  }
  else
  {
  unitTops= parseInt(oUnit.style.top);
  }
   
  unitWidth=parseInt(oUnit.style.width);
  unitHeight= parseInt(oUnit.style.height);
   

  frameWidth=parseInt(oFrame.style.width);
  frameHeight=parseInt(oFrame.style.height);
  step=3;
}


 function getEventPosition(e,container) //构造对象

  var rect = container.getBoundingClientRect(); 
  this.x=e.clientX-rect.left;
  this.y=e.clientY-rect.top;




function FrameClick(e)//Click调用函数
{
  clearInterval(moveX);
  clearInterval(moveY); 
  var positoin =new getEventPosition(e,document.getElementById(strFrameID));
   
  var positionMaxX= frameWidth-parseInt(document.getElementById(strObjID).style.width); 
  var actualrangeX = positoin.x-unitWidth/2;//X轴实际移动距离
  if(actualrangeX>positionMaxX)
  {
  actualrangeX=positionMaxX;
  }
   
  var positionMaxY= frameHeight-parseInt(document.getElementById(strObjID).style.height);
  var actualrangeY = positoin.y-unitHeight/2;//Y轴实际移动距离
  if(actualrangeY>positionMaxY)
  {
  actualrangeY=positionMaxY;
  }
   

  moveX = setInterval("xMove("+actualrangeX+")",10);
  moveY= setInterval("yMove("+actualrangeY+")",10);
}

function Actualrange(Positoin)
{
 return Positoin-unitHeight/2;
}

function xMove(positoinX)//X轴移动
{
  if(unitLeft<positoinX)//向右
  {
  unitLeft+=step;
  if(unitLeft>frameWidth)
  {
  unitLeft=positoinX;
  }
  if(u