为什么我的回去之后越动越乱
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
*{margin: 0;padding: 0}
#red{
width:100px;height: 100px;background: red;position:relative;left: -100px;
}
#blue{
width: 20px;height: 40px;background-color: blue;position: absolute;left: 100px;margin-top:30px;font-size: 10px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var red=document.getElementById('red');
var blue=document.getElementById('blue');
red.onmouseover=function(){
startMove(10,0);
}
red.onmouseout=function(){
startMove(-10,-100);
}
}
var timer=null;
function startMove(speed,itarget){
// function startMove(itarget){
clearInterval(timer);
var red=document.getElementById('red');
var timer=setInterval(function(){
//单参数方法
/*var speed=0;
if(red.offsetLeft>itarget){
speed=-1;
}else{
speed=1;
}*/
if(red.offsetLeft==itarget){
clearInterval(timer);
}
else{
red.style.left=red.offsetLeft+speed+'px';}
},30)
}
</script>
<title>移动效果</title>
</head>
<body>
<div id="red"><div id="blue"></div></div>
</body>
</html>
