JavaScript动画位置问题

Jim41Mavs 发表于 Dev

吉姆41mavs

我有一个篮球和一个篮球按钮。当我单击按钮时，篮球会上下反弹。我设法将篮球和按钮的样式设置为屏幕上所需的位置。

但是，当我单击“动画篮球”按钮时，球的确会上下反弹，但会重新定位到页面顶部，然后开始上下反弹。有人可以查看我的代码，并告诉我单击按钮时如何阻止球重新定位吗？

<head>
   <script src="script.js"></script>
</head>
<input id="ballButton" onclick="checkButton()" type="button" value="Animate Basketball"
<div id="basketball" style="position:absolute;top:430px;left:700px;">
   <img src="http://img.netlumination.com/Basketball_64x64-1.png" Basketball" \>
</div>

CSS：

#ballButton {
  position:absolute;
  top:400px;
  left:700px
}

JS：

var distanceBall = 0;
var directionBall = 1;
var timerToggle = null;
function animateBall() {
  document.getElementById("basketball").style.top = distanceBall + "px";
  distanceBall += directionBall;
  if (distanceBall > 200) { directionBall = -1; }
  if (0 > distanceBall) { directionBall = 1; }
  timerToggle = setTimeout(function () { animateBall(); }, 10);
}

function checkButton() {
  if (document.getElementById("ballButton").value == "Animate Basketball") {
    document.getElementById("ballButton").value = "Stop Basketball";
    animateBall();
  } else {
    document.getElementById("ballButton").value = "Animate Basketball";
    clearTimeout(timerToggle);
  }
}

福斯托（美国）

这是一个（虽然又快又脏）的工作解决方案。我想这就是你的意思。

http://jsfiddle.net/9guaa0j5/1/

我向您的起始变量添加了一些像素，distanceBall并为其中一个函数手动添加了230px。

var distanceBall = 200;
var directionBall = 1;
var timerToggle = null;
function animateBall() {
document.getElementById("basketball").style.top = distanceBall + 230 +"px";
distanceBall += directionBall;
if (distanceBall > 200) { directionBall = -1; }
if (0 > distanceBall) { directionBall = 1; }
timerToggle = setTimeout(function () { animateBall(); }, 10);
}

希望这会有所帮助。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。