请帮我看看这个问题
它的实际移动距离怎么和设置的不一样
<style>
*{margin=0;padding=0;}
div{
position:relative;
left:-200px;
width:200px;
height:100px;
background:#9F6;}
</style>
<script>
window.onload=function(){
var mydiv=document.getElementById('odiv');
mydiv.onmouseover=function(){
starmove();}
mydiv.onmouseout=function(){
starmove1();}
}
var timer=null;
function starmove(){
clearInterval(timer);
var mydiv=document.getElementById('odiv');
timer=setInterval(function(){
mydiv.style.left=mydiv.offsetLeft+10+'px';}
,300)}
function starmove1(){
clearInterval(timer);
var mydiv=document.getElementById('odiv');
timer=setInterval(function(){
mydiv.style.left=mydiv.offsetLeft-10+'px';}
,300)}
</script>
<body>
<div id="odiv"></div>
</body>
</html>