                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

position 改成 relative 便会一直运动？

为什么 id div1的position属性改成“relative”就会一直动下去不会停止，而改成“absolute”就可以停止呢？

#div1

{

width:200px;

height:200px;

background:red;

position:absolute; //改成relative就会一直动？

left:-200px;

top:0

}

PdpdPdpd

2016-03-02

源自：JS动画效果 2-1

关注问题我要回答

678

操作

收起

4 回答

没听说过
2016-03-09

同学，我也遇到这个问题，视频07：03秒的时候老师的#div1{ position:relative}竟然可以运行成功，而我的就只能改成absolute才能成功，问题到底出在哪里呢？

0 回复有任何疑惑可以回复我~

收起回答

Lion_Heart
2016-03-09

relative是相对自身偏移，当然会一直运动下去，详情再去看一下relative解析

0 回复有任何疑惑可以回复我~

收起回答

PdpdPdpd 提问者
2016-03-03

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1
{
width:200px;
height:200px;
background:red;
position:absolute;
left:-200px;
top:0
}
#div1 span
{
width:20px;
height:50px;
background:blue;
position:absolute;
left:200px;
top:75px;
}
</style>
<script>
window.onload=function() {
var oDiv = document.getElementById("div1");
oDiv.onmouseover = startMove;

};
var timer=null;
function startMove()
{
var oDiv = document.getElementById("div1");
clearInterval(timer);
timer=setInterval(function()
{
if(oDiv.offsetLeft==0)
{
clearInterval(timer);
}
else
{
oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
}

},10)
}
</script>
</head>
<body>
<div id="div1"><span id="share">分享</span></div>
</body>
</html>