Javascript动画不起作用

Javascript Animation Not Working

本文关键字：不起作用 动画 Javascript      更新时间：2023-09-26

我有一个JS动画，它应该向下或向上移动名为"卷轴"的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

您看到错误的原因是您在 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;
}
相关文章：