<!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);
}
3 回答
慕娘5227020
TA贡献5条经验 获得超1个赞
定义定时器不能写在函数里面，应该写在外面把它定义为全局变量，抖动的原因也是因为这个定时器没写对，而且你的移入和移出完全没有必要用两个定时器和两个函数，这两个函数代码几乎一样，只有两个参数不同，你可以把两个合成一个，不同的操作通过传参来解决，正负一可以传一个speed来代替，0和-400可以通过传入一个end终止来代替。
甫里
TA贡献10条经验 获得超3个赞
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;
}
添加回答
举报
0/150
提交
取消