<!doctype?html>
<html>
<head>
<meta?charset="utf-8">
<title>無標題文檔</title>
</head>
<body>
</body>
</html>
<!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"?/>
<title>移動效果（按軌跡移動）</title>
<style?type="text/css">
body,div{margin:0;padding:0;}
div{position:absolute;width:66px;height:45px;background:url(img/1.gif)?no-repeat;top:100px;left:50px;}
p,input{margin:10px;}
</style>
<script?type="text/javascript">
window.onload?=?function?()
{
????var?oDiv?=?document.getElementsByTagName("div")[0];
????var?aInput?=?document.getElementsByTagName("input");
????var?oP?=?document.getElementsByTagName("p")[0];
????var?i?=?0;
????
????aInput[0].onclick?=?function?(event)
????{????????
????????(event?||?window.event).cancelBubble?=?true;
????????clearEvent();
????????this.value?+=?"(已激活)";
????????oP.innerHTML?=?"鼠標點擊頁面，?人物將移動至鼠標位置！";
????????document.onclick?=?function?(event)
????????{
????????????var?event?=?event?||?window.event;
????????????oDiv.style.background?=?"url(img/2.gif)?no-repeat";
????????????startMove(oDiv,?{x:event.clientX,?y:event.clientY},?function(){oDiv.style.background?=?"url(img/1.gif)?no-repeat"});
????????????return?false;
????????}????
????};
????
????aInput[1].onclick?=?function?(event)
????{????????
????????(event?||?window.event).cancelBubble?=?true;
????????clearEvent();
????????this.value?+=?"(已激活)";
????????oP.innerHTML?=?"按住鼠標左鍵，在頁面劃動，人物將按照鼠標軌跡移動。"
????????var?aPos?=?[{x:oDiv.offsetLeft,?y:oDiv.offsetTop}];
????????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});????
????????????????return?false;
????????????}
????????????return?false;
????????}
????????document.onmouseup?=?function?()
????????{
????????????document.onmousemove?=?null;
????????????oDiv.style.background?=?"url(img/2.gif)?no-repeat";????????
????????????var?timer?=?setInterval(function?()
????????????{
????????????????if(aPos.length?==?0)
????????????????{
????????????????????clearInterval(timer);
????????????????????oDiv.style.background?=?"url(img/1.gif)?no-repeat";
????????????????????return;????
????????????????};
????????????????oDiv.style.left?=?aPos[0].x?+?"px";
????????????????oDiv.style.top?=?aPos[0].y?+?"px";
????????????????aPos.shift();
????????????},?30);
????????};
????}
????
????function?clearEvent()
????{
????????document.onclick?=?null;
????????document.onmousedown?=?null;
????????document.onmousemove?=?null;
????????document.onmouseup?=?null;
????????for?(i?=?0;?i?<?aInput.length;?i++)
????????{
????????????aInput[i].value?=?aInput[i].value.replace("(已激活)",?"");
????????????aInput[i].onmousedown?=?aInput[i].onmouseup?=?function?(event)
????????????{
????????????????(event?||?window.event).cancelBubble?=?true;????
????????????};
????????}
????}
};
function?startMove(obj,?oTarget,?fnEnd)
{
????clearInterval(obj.timer);
????obj.timer?=?setInterval(function?()
????{
????????doMove(obj,?oTarget,?fnEnd)????
????},?30)????
}
function?doMove(obj,?oTarget,?fnEnd)
{
????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);
????????fnEnd?&&?fnEnd();????
????}
????else
????{
????????obj.style.left?=?obj.offsetLeft?+?iX?+?"px";
????????obj.style.top?=?obj.offsetTop?+?iY?+?"px";????
????}
}
</script>
</head>
<body>
<input?type="button"?value="根據鼠標點擊位置移動"?/><input?type="button"?value="根據標鼠標軌跡移動"?/>
<p>請點擊按鈕激活功能！</p>
<div></div>
</body>
</html>var?aPos?=?[{x:oDiv.offsetLeft,?y:oDiv.offsetTop}]這個數組嘛？這行代碼與aPos.push({x:event.clientX,?y:event.clientY});之間是什么關系
或者是怎么運行的呢？有什么作用啊
還有就是????????oDiv.style.left?=?aPos[0].x?+?"px";
????????????????oDiv.style.top?=?aPos[0].y?+?"px";
這兩行代碼是怎么運行的？這個x，y表示的是數值嘛？求解答
關于這行代碼的解釋？誰幫幫我啊。在下跪求
慕粉3686312
2016-11-29 21:02:30
