这段代码为什么运行不了。动画一直抖动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Move Game</title>
<link rel="stylesheet" type="text/css" href="style/MoveOne.css">
</head>
<body>
<div id="box">
<span>Cion</span>
</div>
<script src="js/Movefirst.js"></script>
</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
相关分类
JavaScript