標籤：javascript js 碰撞 反彈 運動
<!doctype html><html><head><meta charset="utf-8"><title>無標題文檔</title><style type="text/css">#main {width:525px; height:300px; border:3px double black;}#t {font-size:30px;color:blue;width:120px;height:35px;position:absolute;left:1;top:1;}</style></head><body><div id="main" onMouseDown="MovePos();" onMouseUp="BeginMove();"><div id="t" >移動文本</div></div><script type="text/javascript">var tID;var iDeltaX = 1,iDeltaY = 1,iTmp;var obj = document.getElementById("t");var x = obj.style.left;var y = obj.style.top;var TOPX = 420,BOUNDX =1,TOPY =270,BOUNDY=1;function MovePos(){clearTimeout(tID);//每次運動前都要清除上一次的定時器，這個是關鍵！！x=parseInt(x+iDeltaX);y=parseInt(y+iDeltaY);//注意！x=x+1;和x=x+iDeltaX;都不行！//核心：反彈碰撞演算法if(x>TOPX || x<BOUNDX || y>TOPY || y<BOUNDY){iTmp = iDeltaX;iDeltaX=-iDeltaY;iDeltaY=iTmp;}//文本沒移動10步後（每次移動步長1像素），文本顏色就變為紅色，再移動10步後，文本顏色又變成藍色，並持續這種切換方式if(x%10==0){if(x%20==0){obj.style.color = "blue";}else{obj.style.color = "red";}}obj.style.left = x+"px";obj.style.top = y+"px";//注意！obj.setAttribute("left",x);obj.setAttribute("top",y);是不行的！//設定定時器tID=setTimeout("MovePos()",10);}function BeginMove(){clearTimeout(tID);}//當滑鼠點擊在div(id="main")內按下時，運動開始，並且在滑鼠彈起時運動結束，所以，要在div(id="main")內按下按一下滑鼠，然後在div(id="main")外鬆開，滑鼠彈起//其實這個不怎麼完美，因為div(id="main")的位置還沒調好，不過，反彈效果成功了</script></body></html>
JS的碰撞周期移動
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
