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動畫位置問題

回答

相關問題