Javascript 动画不工作

Question

我有一个 JS 动画，它可以在名为 "reel" 的 div 中向下或向上移动图像。有两个箭头 href="javascript:reelUp" 或 "reelDown"，取决于箭头。出于某种原因，当我单击箭头时，它会抛出一个语法错误，指出它需要一个表达式但已结束脚本。不知道出了什么问题——我直接从有效的教程中提取了这个。

采纳新建议后刚刚更新了代码。它仍然无法正常工作，所以我包括了我的（凌乱的）CSS。任何帮助将不胜感激！我不知道是什么问题！

<!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 {
    position:relative;
    left:105%;
    top0%;
}

#arrowUp {

}


/*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

function frame() {

    down++

    elem.style.top = down + 'px'

    if (down == 100)
        clearInterval(id)
}

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

}

//REEL DOWN
function reelDown(elem) {

elem = document.getElementById(elem);

var down = 0

function frame() {

down++

    elem.style.top = -1 * down + 'px'

    if (down == 100)
        clearInterval(id)
}

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

}
</script>

</head>

<body>

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


  <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>

    <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>

</body>
</html>

本文所基于的教程代码位于：http://javascript.info/files/tutorial//browser/animation/move.html

Answer 1

您看到的错误的原因是您在 href 属性中使用了双引号，这使解析器感到困惑。看到问题了吗？

href="javascript:reelUp("reel")"

最方便的解决方法是使用单引号。

href="javascript:reelUp('reel')"

也对向下箭头执行相同的操作。

一旦你这样做，你仍然会遇到另一个错误，因为你传递给 reelUp() 和 reelDown() 的 elem 是一个字符串，所以这一行来自 reelUp()，以及 reelDown() 中对应的一个将失败：

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

因为 elem 是一个字符串，而不是一个元素，你的浏览器会报错。要解决此问题，请添加：

elem = document.getElementById(elem);

到 reelUp() 和 reelDown() 的开头。这将查找具有该 ID 的实际元素。

进行这些更改后，您的代码可以正常工作，当您单击箭头时，东西就会开始移动。我不确定它是否一定会按您希望的方式移动，但这会让您达到可以调试的程度。

编辑：为了能够看到动画，元素 <div id="reel"> 需要 CSS 更改。事实上，当您设置卷轴的 top 属性时，它会被忽略，因为仅此一项不足以让浏览器知道您希望卷轴移动到哪里。您还必须设置 position 属性.

我不知道你到底想要什么，但是如果你将 position 设置为 relative，那么这将导致 top 属性移动卷轴相对于其默认位置向上或向下。这就是我在测试我的答案时所做的。

因此将此添加到您的 CSS:

#reel {
    position: relative;
}

Javascript 动画不工作

Javascript Animation Not Working

html

javascript

syntax

animation