[求助]动画不能正常移动
我想做个移动文字的效果,到左边一定距离往下移动,然后到一定距离往左,然后到一定距离往上,然后回到初始位置后又往右,一直循环,下面是代码:<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Cartoont</title>
<script>
var flag=1;
var dx=10,dy=10;
var x=0,y=50;
var v;
function moveRight(){
var r=document.getElementById("cartoon");
x+=dx;
r.style.left=x+"px";
}
function moveLeft(){
var l=document.getElementById("cartoon");
x-=dx;
l.style.left=x+"px";
}
function moveUp(){
var u=document.getElementById("cartoon");
y+=dy;
u.style.top=y+"px";
}
function moveDown(){
var d=document.getElementById("cartoon");
y-=dy;
d.style.top=y+"px";
}
function moveCartoon(){
var o=document.getElementById("cartoon");
var xx=o.left;
var yy=o.top;
if(xx==0&&yy==50) flag=1;
if(xx==100&&yy==50) flag=2;
if(xx==100&&yy==100) flag=3;
if(xx==0&&yy==100) flag=4;
switch(flag){
case 1:moveRight();break;
case 2:moveDown();break;
case 3:moveLeft();break;
case 4:moveUp();break;
}
v=setTimeout("moveCartoon()",100);
}
function stopCartoon(){
clearTimeout(v);
}
</script>
</head>
<body>
<input type="button" value="Start" onclick="moveCartoon()">
<input type="button" value="Stop" onclick="stopCartoon()"><br>
<div id="cartoon" style="position:absolute;left:0px;top:50px;">
Cartoon
</div>
</body>
</html>
问题是我点开始按钮后,文字就一直往右移动,请问是不是if语句有问题?还是其他有问题?