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

Move an element to the right side then return to left side

本文关键字：然后 返回 元素 移动      更新时间：2023-09-26

简而言之，我想将一个元素移动到右侧，当到达右侧时，再次返回左侧，依此类推("ex: hit a ball to a wall, then it come back to you again")。

但是移动元素时出现错误！。

代码

var Ball = document.getElementById('ball');
var ballPosition = 0;
var pageWidth = document.body.offsetWidth;
var Loop = setInterval(function () {
    ballPosition = Ball.offsetLeft;
    if (ballPosition < pageWidth) {
        Ball.style.left = ballPosition + 10 + "px";
    } else {
        Ball.style.left = ballPosition - 10 + "px";
    }
}, 1000 / 60);
<div id="ball" style="width:70px; height:70px; margin:0; padding:0; border-radius:50px; position:absolute; background-color:#ff0000"> </div>

您可以尝试使用ballSpeed变量，当它到达左侧或右侧时将其乘以-1：

var ball = document.getElementById('ball'),
  ballPosition = 0,
  ballSpeed = 10,
  pageWidth = document.body.offsetWidth - ball.offsetWidth;
setInterval(function() {
  ball.style.left = (ballPosition += ballSpeed) + 'px';
  if (ballPosition <= 0 || ballPosition >= pageWidth) {
    ballSpeed *= -1;
  }
}, 1000 / 60);
#ball {
  width: 70px;
  height: 70px;
  border-radius: 50px;
  position: absolute;
  background-color: #ff0000;
}
<div id="ball"></div>

您不需要JavaScript，可以使用CSS3动画：

此处示例

.ball {
    width: 70px; height: 70px;
    border-radius: 50%; position:absolute;
    background-color: #f00;
    position: absolute;
    left: 0;
    -webkit-animation: move 2s infinite linear forwards;
    animation: move 2s infinite linear forwards;
}
@keyframes move {
    50% { left: calc(100% - 70px); }
}
@-webkit-keyframes move {
    50% { left: calc(100% - 70px); }
}
<div class="ball"></div>

您可以使用方向变量来确定球应该向左还是向右移动，并在球碰到边缘时更改方向。

var Ball = document.getElementById('ball');
var ballPosition = 0;
var direction = 1;
var pageWidth = document.body.offsetWidth;
var Loop = setInterval(function () {
    ballPosition = Ball.offsetLeft;
    if (ballPosition > pageWidth) {
        direction = -1;
    } else if (ballPosition < 0){
        direction = 1;
    }
    Ball.style.left = (ballPosition + direction*10) + "px";
}, 1000 / 60);
<div id="ball" style="width:70px; height:70px; margin:0; padding:0; border-radius:50px; position:absolute; background-color:#ff0000"> </div>

这就是你需要更改代码的地方，所以当它到达页面末尾时，它会重新开始，希望这能帮助

var Ball = document.getElementById('ball');
var ballPosition = 0;
var pageWidth = document.body.offsetWidth;
var Loop = setInterval(function () {
    ballPosition = Ball.offsetLeft;
    if (ballPosition < pageWidth) {
        Ball.style.left = ballPosition + 10 + "px";
    } else {
        Ball.style.left = 0 + "px";
    }
}, 1000 / 60);
<div id="ball" style="width:70px; height:70px; margin:0; padding:0; border-radius:50px; position:absolute; background-color:#ff0000"> </div>

当你的球碰到墙上（else-部分）时，它试图后退，但它的位置小于页面宽度和。。它又撞到墙上了。

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

var Ball = document.getElementById('ball');
var ballPosition = 0;
var pageWidth = document.body.offsetWidth;
var hitted = false;
var Loop = setInterval(function () {
ballPosition = Ball.offsetLeft;
if (!hitted) {
    Ball.style.left = ballPosition + 10 + "px";
    hitted = (ballPosition > pageWidth);
} else {
    Ball.style.left = ballPosition - 10 + "px";
    hitted = !(ballPosition < 0);
}
  
}, 1000 / 60);
<div id="ball" style="width:70px; height:70px; margin:0; padding:0; border-radius:50px; position:absolute; background-color:#ff0000"> </div>

如果不需要calc函数，可以使用translate参见@Josh Crozier

.ball {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  position: absolute;
  background-color: green;
  position: absolute;
  left: 0;
  -webkit-animation: zigzag 3s infinite ease;
}
@-webkit-keyframes zigzag {
  50% {
    transform: translateX(100vw);
    margin-left: -64px
  }
}
<div class="ball"></div>

相关文章：