JavaScript动画位置问题

我有一个篮球和一个篮球按钮。当我点击按钮时，篮球会上下跳动。我设法将篮球和按钮设计到屏幕上我想要的位置。JavaScript动画位置问题

但是当我点击“Animate Basketball”按钮时，球会反弹，但它会自动移动到我的页面顶部，然后开始弹起和跳下。有人可以看看我的代码，并告诉我如何在点击按钮时阻止球重新定位吗？

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

来源

2015-12-12 Jim41Mavs

一个jsfiddle或代码片段将是美好:) – www139

下面是一个（虽然快速和肮脏）工作的解决方案。我认为这是你的意思。

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

希望这对我有所帮助。

来源

2015-12-12 17:33:15

感谢很多人，distanceBall是问题，我知道这是我未来的编码努力！ – Jim41Mavs

我很高兴我能帮上忙！ –

你的变量distanceBall的问题。当你用getElementById取得篮球时，你的代码说它的CSS'top'属性是0px。将distanceBall变量更改为大约410px。这里有一个例子：Working ball animation

这里是另一个码位，可以帮助：CSS ball animation

希望我帮助！

来源

2015-12-12 17:32:17 FlipFloop

非常感谢很多人，这确实有很大的帮助，虽然distanceBall由Fausta NA首先解决，但是我将在我的站点的另一部分使用您的CSS球动画，我是一个NBA球迷！ – Jim41Mavs

JavaScript动画位置问题

回答

相关问题