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动画无法正常运作

回答

相关问题