js 模拟鼠标控制小人移动,该如何处理-JavaSript-爱易网页

js 模拟鼠标控制小人移动,该如何处理

日期：2014-05-16　浏览次数：20509 次

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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

js 模拟鼠标控制小人移动,该如何处理

相关资料更多>

推荐阅读更多>