標籤：ack for迴圈 ceil over elements body 步驟 var 調用
多物體運動架構
例子：多個Div，滑鼠移入biankuan
單定時器，存在問題
每個Div一個定時器
總結：
參數問題：
當運動當前的div的時候可以傳參數
onStart（obj，tag）；
obj為當前運動的div 調用時用this
tag表示運動的終點距離
開一個定時器（當三個div一起運動時會卡）
所以利用for迴圈開三個定時器
步驟：
1.設定定時器 var timer=null；
2.關閉定時器
clearInterval(obj.timer);
3.開啟定時器：
obj.timer=setInterval（function（）{}，30）；
4.緩衝時設定速度 並且要取整
5.判斷當前位置與目標位置是否相等
<!doctype html><html><head><meta charset="utf-8"><title>無標題文檔</title><style>div{width:200px;height:50px;background:#F00;margin:10px;}</style><script>window.onload=function(){ var aDiv=document.getElementsByTagName(‘div‘); for(var i=0;i<aDiv.length;i++){ aDiv[i].timer=null; aDiv[i].onmouseover=function(){ onStart(this,400); }; aDiv[i].onmouseout=function(){ onStart(this,100); }; } } //var timer=null;function onStart(obj,tag){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var speed=(tag-obj.offsetWidth)/6; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(obj.offsetWidth==tag){ clearInterval(obj.timer); }else{ obj.style.width=obj.offsetWidth+speed+‘px‘; } },30); }</script></head><body><div></div><div></div><div></div></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
