Question

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

但移动元素时出错！。

守则

＆＃13;

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);

＆＃13;

<div id="ball" style="width:70px; height:70px; margin:0; padding:0; border-radius:50px; position:absolute; background-color:#ff0000"> </div>

＆＃13;

Answer 1

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

Example Here

.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>

Answer 2

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

＆＃13;

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);

＆＃13;

#ball {
  width: 70px;
  height: 70px;
  border-radius: 50px;
  position: absolute;
  background-color: #ff0000;
}

＆＃13;

<div id="ball"></div>

＆＃13;

Answer 3

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

＆＃13;

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);

＆＃13;

<div id="ball" style="width:70px; height:70px; margin:0; padding:0; border-radius:50px; position:absolute; background-color:#ff0000"> </div>

＆＃13;

Answer 4

当你的球碰到一堵墙（else - 部分）时，它会试图回去，但它的位置会比页面宽度小......然后再次撞到墙上。

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

＆＃13;

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);

＆＃13;

<div id="ball" style="width:70px; height:70px; margin:0; padding:0; border-radius:50px; position:absolute; background-color:#ff0000"> </div>

＆＃13;

Answer 5

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

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>

Answer 6

如果不需要calc功能，可以使用翻译，请参阅@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>

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

6 个答案: