                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS動(dòng)畫效果

簡(jiǎn)單運(yùn)動(dòng)問(wèn)題

<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>簡(jiǎn)單運(yùn)動(dòng)</title>
<style?type="text/css">
#div1{
width:?200px;
height:?200px;
background-color:?red;
position:?relative;
left:?-200px;
top:?0;
}
#div1?span{
width:?20px;
height:?50px;
background-color:blue;
position:?absolute;
left:?200px;
top:?75px;
}
</style>
<script?type="text/javascript">
window.onload=function(){
var?myDiv=document.getElementById('div1');
myDiv.onmouseover=function(){
startMove(0);
}
myDiv.onmouseout=function(){
startMove(-200);
}

}
var?timer=null;
function?startMove(iTarget){
clearInterval(timer);
var?myDiv=document.getElementById('div1');
timer=setInterval(function(){
var?speed=0;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if?(myDiv.offsetLeft>iTarget)?{
speed=-10;
}?else?{
speed=5;
}
if?(myDiv.offsetLeft==iTarget)?{
clearInterval(timer);
}
else{
myDiv.style.left=myDiv.offsetLeft+speed+'px';
}

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

為什么不是0和-200，總會(huì)多出來(lái)個(gè)8px，而且出來(lái)和退出的速度明顯不一樣呢。。。