Question

浏览JavaScript动画教程并查看其他堆栈流动帖子。我想知道为什么当我尝试自己实现时example不起作用。即使逐字复制，动画也不起作用。这是我根据给出的示例代码创建的版本。我非常了解其他可用的示例，其中包含更多代码，但此人似乎使用较少的内容并获得相同的结果，并将其作为工作代码进行宣传。我也知道CSS3以及使用它有多容易，我只是好奇为什么它不会起作用。谢谢你的阅读。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Animation</title>
<style type="text/css">
.area {
    width: 300px;
    height: 300px;
    border-style: solid;
    border-width: 1px;
}

.block {
    width: 25px;
    height: 25px;
    background: #999;
}
</style>
<script>
function move(elem) {
    var left = 0;
    function frame() {
        left++; //update parameters
        elem.style.left = left + 'px'; //show frame
        if(left==100)
            clearInterval(id);
    }
    var id = setInterval(frame, 10); //draw every 10ms
}
</script>
</head>
<body>
    <div onclick="move(this.children[0])" class="area">
    <div class="block"></div>
</div>
</body>
</html>

Answer 1

您需要对块元素进行相对或绝对定位才能使左属性起作用：

.block {
    position: relative;
    width: 25px;
    height: 25px;
    background: #999;
}

Answer 2

当position属性为静态（默认）时，属性left处于活动状态。切换到位置：相对，或使用margin-left而不是left。

基本的JavaScript动画

2 个答案: