这段代码为什么运行不了。动画一直抖动

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</body>

</html>

window.onload=Move;
function Move(){
	var box=document.getElementById("box");
	box.onmouseover=function (){
		MoveBegin();
	}
	box.onmouseout=function(){
		MoveStop();
	}
}

function MoveBegin(){
	var timer=null;
	clearInterval(timer);
	var box=document.getElementById("box");
	timer=setInterval(function(){
		if (box.offsetLeft==0) {
			clearInterval(timer);
		}else{
			box.style.left=box.offsetLeft+1+"px";
		}
		
	},30);
}

function MoveStop(){
	var timer=null;
	var box=document.getElementById("box");
	clearInterval(timer);
	timer=setInterval(function(){
		if (box.offsetLeft==-400) {
			clearInterval(timer);
		}else{
			box.style.left=box.offsetLeft-1+"px";
		}
		
	},30);
}

甫里

浏览 1586回答 3

3回答

慕娘5227020

定义定时器不能写在函数里面，应该写在外面把它定义为全局变量，抖动的原因也是因为这个定时器没写对，而且你的移入和移出完全没有必要用两个定时器和两个函数，这两个函数代码几乎一样，只有两个参数不同，你可以把两个合成一个，不同的操作通过传参来解决，正负一可以传一个speed来代替，0和-400可以通过传入一个end终止来代替。

甫里

body{ margin: 0; padding: 0;}#box{ width: 400px; height: 200px; background: red; left: -400px; position: relative; }.smallbox{ width: 36px; height: 20px; background: blue; float: right; position: absolute; top: 84px; left: 400px;}

随时随地看视频慕课网APP