关于沿鼠标移动轨迹运动的问题

qq_24640809 2015-05-14 09:41:08

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body,div{margin:0;padding:0;}
div{position:absolute;width:66px;height:45px;background-image: url(人物.png);
background-repeat: no-repeat;top:100px;left:50px;}
p,input{margin:10px;}
</style>
<script type="text/javascript">
window.onload=function()
{
var aDiv=document.getElementsByTagName('div')[0];;
var aInput=document.getElementsByTagName('input');
var oP=document.getElementsByTagName('p')[0];
var aPos=[];

aInput[0].onclick=function(event)
{
this.value+=("（已激活）");
oP.innerHTML='鼠标点击页面，人物将移动至鼠标位置！'

document.onclick=function(event)
{
var event=event||window.event;
aDiv.style.background = "url(人物1.png) no-repeat"
startMove(aDiv,{x:event.clientX,y:event.clientY},function(){
aDiv.style.background = "url(人物.png) no-repeat"
});

}
}
aInput[1].onclick=function(event)
{
aPos.push({x:aDiv.offsetLeft,y:aDiv.offsetTop});
oP.innerHTML='鼠标在页面滑动，鼠标松开，人物将跟随鼠标轨迹移动';
document.onmousedown=function(event)
{
var event=event||window.event;
aPos.push({x:event.clientX,y:event.clientY});

document.onmousemove=function(event)
{
var event=event||window.event;
aPos.push({x:event.clientX,y:event.clientY})
}
document.onmouseup=function(event)
{
document.onmousemove=null;
clearInterval(timer);
aDiv.style.background = "url(人物1.png) no-repeat";
var timer=setInterval(function(){
if (aPos.length==0) {
clearInterval(timer);
aDiv.style.background = "url(人物.png) no-repeat";
return;
}

aDiv.style.left=aPos[0].x+'px';
aDiv.style.top=aPos[0].y+'px';
aPos.shift();

},30)
}

}
}

function startMove(obj,oTarget,fn)
{
clearInterval(obj.timer)
obj.timer=setInterval(function(){
var iX=(oTarget.x-obj.offsetLeft)/5;;
var iY=(oTarget.y-obj.offsetTop)/5;
iX=iX>0?Math.ceil(iX):Math.floor(iX);
iY=iY>0?Math.ceil(iY):Math.floor(iY);
if (oTarget.x==obj.offsetLeft&&oTarget.y==obj.offsetTop) {
clearInterval(obj.timer);
if (fn) {fn()};
}
else{
aDiv.style.left=aDiv.offsetLeft+iX+'px';
aDiv.style.top=aDiv.offsetTop+iY+'px';
}
},30)

}
}

</script>
<head>

</head>
<body>
<input type='button' value='鼠标点击移动人物'></input><input type='button' value='鼠标跟着鼠标轨迹移动'></input>
<p>请点击按钮激活功能！</p>
<div></div>
</body>

</html>

--------------------------------------------------------------------------------------------------------------------------------

aInput[1].onclick=function(event)
{
aPos.push({x:aDiv.offsetLeft,y:aDiv.offsetTop});
oP.innerHTML='鼠标在页面滑动，鼠标松开，人物将跟随鼠标轨迹移动';
document.onmousedown=function(event)
{
var event=event||window.event;
aPos.push({x:event.clientX,y:event.clientY});

document.onmousemove=function(event)
{
var event=event||window.event;
aPos.push({x:event.clientX,y:event.clientY})
}
document.onmouseup=function(event)
{
document.onmousemove=null;
clearInterval(timer);
aDiv.style.background = "url(人物1.png) no-repeat";
var timer=setInterval(function(){
if (aPos.length==0) {
clearInterval(timer);
aDiv.style.background = "url(人物.png) no-repeat";
return;
}

aDiv.style.left=aPos[0].x+'px';
aDiv.style.top=aPos[0].y+'px';
aPos.shift();

},30)
}
-------------------------------------------------------------------------问题代码；

aDiv.style.left=aPos[0].x+'px';
aDiv.style.top=aPos[0].y+'px';

这里的aPos[0].x保存的是offsetLeft,aPos[1].y保存的是offsetTop,这两个值不是固定的吗？它是怎么让物体随着鼠标滑动的轨迹运动的

...全文