<!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>
這一句跟apos之間是什么關系呢?求解答一下。
求大神解答關于這行代碼的意思????在線等
慕粉3686312
2016-11-28 22:08:38