作者elsa0116 (Fly*晴子)
看板Ajax
標題[問題] JS 改用marginLeft後的速度變化
時間Thu Jun 5 14:17:02 2014
這兩天開始初碰javascript，
寫了一個小DIV在大DIV中跑的程式，
原本依照老師的用法有設相對跟絕對位置，(←有很順利的跑)
後來改用marginLeft跟marginTop後，
居然出現了奇妙的速度變化....
想問下板上各位先進這是為什麼.....囧
--以下附上程式碼--
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>DIV</title>
<style type="text/css">
#aa {
border:1px solid #000000;
width:1000px;
height:700px;
}
#bb{
border:1px solid #000000;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div id="aa">
<div id="bb"></div>
</div>
<script type="text/javascript">
function run(){
var obj = document.getElementById("bb");
if(obj.offsetLeft<=900 && obj.offsetTop<=0){
obj.style.marginLeft=(obj.offsetLeft+10)+"px";
}else if(obj.offsetTop<=600 && obj.offsetLeft>=900){
obj.style.marginTop=(obj.offsetTop+10)+"px";
}
else if(obj.offsetLeft>0){
obj.style.marginLeft=(obj.offsetLeft-10)+"px";
}else{
obj.style.marginTop=(obj.offsetTop-10)+"px";
}
}
setInterval(run,50);
</script>
</body>
</html>
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 140.118.17.64
※ 文章網址: http://webptt.com/m.aspx?n=bbs/Ajax/M.1401949161.A.990.html
1F：→ mmis1000:因為offset是對window的位移，不是對父元素 06/05 16:55
2F：→ elsa0116:但是計時器不是有設定時間嗎??為什麼會造成中間速度不一? 06/05 17:05
3F：→ mmis1000:因為left跟top每次算時都多出來了啊？所以前後後退 06/05 17:08
4F：→ mmis1000:的距離不一樣 06/05 17:08
5F：→ mmis1000:更正，應該是對 HTMLElement.offsetParent 的位移 06/05 17:11
6F：→ elsa0116:所以只要小DIV設絕對就不會突然慢下了，就是這原因嗎@@? 06/05 17:50
7F：→ mmis1000: ^ 看不懂你打啥@@ 06/05 18:12
8F：→ elsa0116:就是後來我小DIV(id=bb)的樣式多設絕對位置，他就有正常 06/05 23:03
9F：→ elsa0116:跑了@@ 沒設的話會跑到一半突然慢下 06/05 23:04
10F：→ mmis1000:建議你先去w3cschool把box model跟position那兩章看完 06/05 23:20
11F：→ mmis1000:因為絕對位置的定位是相對於，對最接近自身之定位元素 06/05 23:23
12F：→ mmis1000:而此例中他上面都沒有定位元素，因此最接近的預設為body 06/05 23:24
13F：→ mmis1000:不過做動畫根本沒必要用offsetTop， 06/05 23:25
14F：→ mmis1000:直接用變數存上次的位置就好了 06/05 23:25
16F：→ elsa0116:好QQQQ謝謝您!!!!!我再多研究看看!!非常感謝!! 06/06 00:19