為什么我的回去之后越動越亂
<!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>
2016-03-23
? ? ?var timer=null;
? ??? ?function startMove(speed,itarget){
? ??? ??? ?//? ??? ?function startMove(itarget){
? ??? ??? ?clearInterval(timer);
? ??? ??? ?var red=document.getElementById('red');
? ??? ??? ?var timer=setInterval(function(){
? ??? ??? ??? ?//單參數方法
? ??? ??? ??? ?/*var speed=0;
startMove里面的timer前面不能加var聲明 加的話你前面清除的是方面外面的全局timer 然后你每次執行方法都重新定義了一個局部的timer定時器 ?簡單說方面里面定時器的timer不是外面全局的timer