Javascript 将元素移到右侧，然后返回左侧

简而言之，我想把一个元素移到右边，当它到达右边时，又回到左边，依此类推（

（“例如：把球打到墙上，然后它又回到你身边”）

但是移动元素时出错

代码

var Ball=document.getElementById（'Ball'）；
var-ballPosition=0；
var pageWidth=document.body.offsetWidth；
变量循环=设置间隔（函数（）{
ballPosition=Ball.offsetLeft；
if（球位<页面宽度）{
Ball.style.left=球位+10+“px”；
}否则{
Ball.style.left=球位-10+“px”；
}
}, 1000 / 60);
当你的球撞到墙上（
否则
-部分）时，它试图返回，但它的位置小于页宽和。。它又撞到墙上了

只需为你的球添加任何标志（bool）。当它撞到墙上时，您应该设置
flag=true
，然后在您的条件下检查此标志


var Ball=document.getElementById（'Ball'）；
var-ballPosition=0；
var pageWidth=document.body.offsetWidth；
var hitted=false；
变量循环=设置间隔（函数（）{
ballPosition=Ball.offsetLeft；
如果（！命中）{
Ball.style.left=球位+10+“px”；
命中=（球位>页面宽度）；
}否则{
Ball.style.left=球位-10+“px”；
击球=！（球位<0）；
}
}, 1000 / 60);
当你的球撞到墙上（
否则
-部分）时，它试图返回，但它的位置小于页宽和。。它又撞到墙上了

只需为你的球添加任何标志（bool）。当它撞到墙上时，您应该设置
flag=true
，然后在您的条件下检查此标志


var Ball=document.getElementById（'Ball'）；
var-ballPosition=0；
var pageWidth=document.body.offsetWidth；
var hitted=false；
变量循环=设置间隔（函数（）{
ballPosition=Ball.offsetLeft；
如果（！命中）{
Ball.style.left=球位+10+“px”；
命中=（球位>页面宽度）；
}否则{
Ball.style.left=球位-10+“px”；
击球=！（球位<0）；
}
}, 1000 / 60);
这就是您需要更改代码的地方，所以当它到达页面末尾时，它会重新开始，希望这对您有所帮助


var Ball=document.getElementById（'Ball'）；
var-ballPosition=0；
var pageWidth=document.body.offsetWidth；
变量循环=设置间隔（函数（）{
ballPosition=Ball.offsetLeft；
if（球位<页面宽度）{
Ball.style.left=球位+10+“px”；
}否则{
Ball.style.left=0+“px”；
}
}, 1000 / 60);
这就是您需要更改代码的地方，所以当它到达页面末尾时，它会重新开始，希望这对您有所帮助


var Ball=document.getElementById（'Ball'）；
var-ballPosition=0；
var pageWidth=document.body.offsetWidth；
变量循环=设置间隔（函数（）{
ballPosition=Ball.offsetLeft；
if（球位<页面宽度）{
Ball.style.left=球位+10+“px”；
}否则{
Ball.style.left=0+“px”；
}
}, 1000 / 60);
您不需要JavaScript，可以使用CSS3动画：



.ball{
宽度：70px；高度：70px；
边界半径：50%；位置：绝对；
背景色：#f00；
位置：绝对位置；
左：0；
-webkit动画：向前移动2 s无限线性；
动画：向前移动2秒；
}
@关键帧移动{
50%{左：计算（100%-70px）；}
}
@-webkit关键帧移动{
50%{左：计算（100%-70px）；}
}
您不需要JavaScript，可以使用CSS3动画：



.ball{
宽度：70px；高度：70px；
边界半径：50%；位置：绝对；
背景色：#f00；
位置：绝对位置；
左：0；
-webkit动画：向前移动2 s无限线性；
动画：向前移动2秒；
}
@关键帧移动{
50%{左：计算（100%-70px）；}
}
@-webkit关键帧移动{
50%{左：计算（100%-70px）；}
}
您可以尝试使用
ballSpeed
变量，当变量到达左侧或右侧时，将其乘以
-1
：


var ball=document.getElementById（'ball'），
球位=0，
球速=10，
pageWidth=document.body.offsetWidth-ball.offsetWidth；
setInterval（函数（）{
ball.style.left=（球位+=球速）+'px'；
if（ballPosition=pageWidth）{
球速*=-1；
}
}, 1000 / 60);
球{
宽度：70px；
高度：70像素；
边界半径：50px；
位置：绝对位置；
背景色：#ff0000；
}
您可以尝试使用
ballSpeed
变量，当变量到达左侧或右侧时，将其乘以
-1
：


var ball=document.getElementById（'ball'），
球位=0，
球速=10，
pageWidth=document.body.offsetWidth-ball.offsetWidth；
setInterval（函数（）{
ball.style.left=（球位+=球速）+'px'；
if（ballPosition=pageWidth）{
球速*=-1；
}
}, 1000 / 60);
球{
宽度：70px；
高度：70像素；
边界半径：50px；
位置：绝对位置；
背景色：#ff0000；
}
您可以使用方向变量来确定球应该向左还是向右移动，并在球碰到边缘时更改方向


var Ball=document.getElementById（'Ball'）；
var-ballPosition=0；
var方向=1；
var pageWidth=document.body.offsetWidth；
变量循环=设置间隔（函数（）{
ballPosition=Ball.offsetLeft；
如果（球位置>页面宽度）{
方向=-1；
}否则如果（球位<0）{
方向=1；
}
Ball.style.left=（球位+方向*10）+“px”；
}, 1000 / 60);
您可以使用方向变量来确定ba