Javascript: вопрос анимации - PullRequest
Новая
       0

Javascript: вопрос анимации

0 голосов
/ 05 июля 2011

Эта проблема должна быть достаточно простой, я пытаюсь изучить анимацию, используя javascript, и для начала у меня есть изображение шара, который я хочу переместить влево на один пиксель за раз.вот что у меня есть:

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>

это то, что у меня есть, и мяч, кажется, не двигается.Что я делаю не так?

Ответы [ 2 ]

0 голосов
/ 05 июля 2011

Вы должны использовать 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>
0 голосов
/ 05 июля 2011

Вы не можете просто обернуть анимацию в цикл for. Вы ничего не увидите, и это будет слишком быстро. Вам нужно обернуться, используя setInterval или setTimeout. Как то так 

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

Вам также нужно удалить 'px' из style.right и проанализировать int. Я думаю, что вы можете сделать 

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

Вот демоверсия! http://jsfiddle.net/t6PY5/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...