Question

这个问题应该很简单，我正在尝试使用javascript学习动画，并开始我有一个球的图像，我想一次向左移动一个px。这是我到目前为止所拥有的：

的style.css

 #field {

   height:200px;
   border-bottom: 1px solid black;
 }

animation.js

 function move()
 {
        ball = document.getElementById('ball');

    ball.style.right = (ball.style.right + 1) + "px";
 }

的index.html

 <link href="../js2/stylesheet.css" rel="stylesheet" type="text/css" />
 <script src="animattion.js"></script>
 </head>

 <body>


     <div id="field">
             <img src="ball.gif" id="ball" />
     </div>

    <script type="text/javascript">
             setInterval(move,20);
    </script>

 </body>
 </html>

这就是我到目前为止所看到的球似乎没有移动。我做错了什么？

Answer 1

您不能将动画包装在for循环中。你什么也看不见，它会太快。您需要使用setInterval或setTimeout进行环绕。像这样的东西

setInterval(move, 20 /*milliseconds, 50frames/second */)

您还需要从style.right中剥离'px'并解析int。我想你可以做到

parseInt(obj.style.right.replace('px', ''))

这是一个演示！ http://jsfiddle.net/t6PY5/

Answer 2

您应该使用setInterval(func|code, delay)代替循环。

<div id="text">test</div>
<script type="text/javascript">
var div = document.getElementById('test');
var left = 0;
setInterval(function(){
   div.style.left = left++ + 'px';
}, 100);
</script>

Javascript：动画问题

2 个答案: