Question

我为“卷轴”创建了这个脚本，它应该在向上或向下箭头的单击时向上或向下移动。但是，我有两个问题：

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>

Answer 1

较高的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函数的范围内定义。如果您在var id之前声明function frame()，那么它应该有效。

这些是您具体问题的答案。一旦掌控了这些内容，我建议将reelUp和reelDown合并到一个函数中，因为它们大致相同（它们会因单个字符而异：+ / {{ 1}}）。

Javascript动画无法正常运行

1 个答案: