作者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/cn.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