Javascript動畫無法正常運作

我爲一個「卷軸」製作了這個腳本，它應該在點擊向上或向下箭頭時向上或向下移動。但是，我有兩個問題：Javascript動畫無法正常運作

1）向上箭頭將其向下移動，向下箭頭向上移動它
2）執行一次後，我無法再次執行它，我收到一個錯誤，說它是無法解析「頂」。

任何想法爲什麼這可能會發生？我粘貼下面的所有代碼。它並不漂亮，但它包含了一切。

<!doctype html> 

<html> 

<head> 
    <meta charset="utf-8"> 
    <title>Tales of the Hartland: Homepage</title> 

<style type="text/css"> 

/* ID DEFINITIONS */ 

#reelHolder { 
    height: 750px; 
    width: 800px; 
    overflow: hidden; 
    border: 1px solid gray; 
    position: relative; 
    left:50%; 
    margin-left:-400px; 
} 

#arrowDown { 
    z-index:auto; 
    position:relative; 
    left:87.4%; 
} 

#arrowUp { 
    z-index:auto; 
    position:relative; 
} 

#reel { 
    position: relative; 
} 

/*CLASS DEFINITIONS */ 

.banner { 
    position: relative; 
    left:50%; 
    margin-left:-600px; 
} 

.arrow { 
    width:50px; 
    height:50px; 
} 

.reeler { 
    width:600px; 
    height:300px; 
    position: relative; 
    left:50%; 
    margin-left:-300px; 
    margin-top:50px; 
} 

.break { 
    height:0px; 
} 

.bigBreak { 
    height:50px; 
} 

</style> 


<script> 
//REEL UP 
function reelUp(elem) { 

elem = document.getElementById(elem); 

var down = 0; 
var curLoc = elem.style.top; 

function frame() { 

    down++ 

    elem.style.top = down + curLoc + 'px'; 

    if (down == 300) 
     clearInterval(id); 
} 

var id = setInterval(frame, 10) // draw every 10ms 

} 

//REEL DOWN 
function reelDown(elem) { 

elem = document.getElementById(elem); 

var down = 0; 
var curLoc = elem.style.top; 

function frame() { 

down++ 


    elem.style.top = (-1 * down) + curLoc + 'px'; 

    if (down == 300) 
     clearInterval(id); 
} 

var id = setInterval(frame, 10) // draw every 10ms 

} 
</script> 

</head> 

<body> 

    <img src="Banner.png" width="1200" height="150" alt="" class="banner"/> 

    <a id="arrowUp" class="arrow" href="javascript:reelUp('reel')"> 
     <img src="arrowUp.png" alt=""/> 
    </a> 

    <a id="arrowDown" class="arrow" href="javascript:reelDown('reel')"> 
     <img src="arrowDown.png" alt=""/> 
    </a> 

    <div id="reelHolder" class="centerDiv"> 


    <div id="reel"> 
     <img src="reel1.png" class="reeler" id="reel1"/> 
     <div class="break"></div> 
     <img src="reel2.png" class="reeler" id="reel2"/> 
    </div> 



    </div> 

</body> 
</html>

來源

2015-02-06 SeargentGen

仍在尋求幫助！ – SeargentGen 2015-02-07 20:55:00

更高的值elem.style.top將元素向下移動到其容器中。如果top是10px，那麼元素的頂部距離其容器頂部10個像素。如果top是100px，那麼它是90個像素更遠下來。

所以移動元素「上」在reelUp，減少top：

elem.style.top = curLoc - down + 'px';

並將其移動元素「向下」的reelDown，增加top：

elem.style.top = curLoc + down + 'px';

我沒有試過運行你的代碼，但是在閱讀之後，我會想象它只能工作一次的原因是變量id未定義在frame函數的範圍內。如果您在function frame()之前聲明var id，那麼它應該可以工作。

這些是你的具體問題的答案。一旦你有了控制權，我建議將reelUp和reelDown組合成一個函數，因爲它們大部分是相同的（它們會因單個字符而不同：+/-）。

來源

2015-02-06 00:14:41

不幸的是，即使將「+」改爲「 - 」也沒有改變任何一個的方向。沒有解析錯誤，Stil不能多次運行它。 – SeargentGen 2015-02-07 20:55:32

Javascript動畫無法正常運作

回答

相關問題