JavaScript: перемещение изображения

Question

редактирование этой страницы для тех, кто хочет читать это в будущем: P

кажется, я прошу слишком много здесь .. но спасибо тем, кто помогает мне с этим проблема! на самом деле я хочу, чтобы принять все ваш ответ, но мне кажется, я только может принять один ..>>

Вопрос 1:.
я хочу, чтобы переместить изображение, но когда я пытаюсь получить положение изображения (с использованием document.getElementById().style.left), это показывает мне значение NaN, когда я конвертирую его в целое. Интересно, как это исправить:/

вот мой код:

<script type="text/javascript"> 

    function playit() 
    { 
     alert(parseInt(document.getElementById('ball').style.left)); <!-- shows a NaN value --> 
    } 
</script> 

я поместить изображение в таблицу и вызвать его с помощью функции OnClick; <td id="frame" colspan="5" onclick="playit()"> быть точным и я объявил образ как это: <img src="play/ball.png" id="ball" name="ball"/>

вот мой CSS для изображения:

#ball 
{ 
    position:absolute; 
    top:500px; 
    left:500px; 
} 

РАСТВОР (задается VIPIN JAIN): использование .offsetLeft вместо element.style.left

Вопрос 2:
EDIT: Я установил его с помощью .offsetLeft, и он отлично работает. теперь, когда я пытаюсь переместить изображение, я получил еще одну ошибку. Говорят, что я использую слишком много рекурсии. Я знаю, что это происходит, потому что я использую рекурсию, но мне интересно, что случилось с использованием рекурсии?

вот мой код:

<script type="text/javascript"> 

    <script type="text/javascript"> 

    var lball = document.getElementById('ball').offsetLeft; 
    var speed = 500; 

    function moveleft() 
    { 
     if(document.getElementById('ball').offsetLeft >0) 
     { 
      document.getElementById('ball').offsetLeft-=1; 

      setTimeout(moveleft(), speed); 
     } 
     else gameover(); 
    } 
    function playit() 
    { 
     score = 0; 
     setTimeout(moveleft(), speed); 
    } 
</script> 

может кто-то помочь мне с этим? спасибо :)

РАСТВОР (задается Teemu):пожалуйста, обратитесь к Teemu's comment ниже на 'Edit II' часть.

Вопрос 3 (на самом деле я спрашиваю его о комментариях: P)
, когда я попытался установить положение изображения с помощью document.getElementById('ball').offsetLeft-=1;, он показывает неопределенное значение.

РАСТВОР (задается Kemal Fadillah): «Это потому, что вы не можете установить значение элемента Вы должны установить новое значение позиции для .style.leftoffsetLeft..Что-то вроде этого: element.style.left = new_value + "px"; "

Вопрос 4 (опять же, я спрашиваю его о комментариях: P)
, кажется, что изображение не будет двигаться плавно (он выглядит ..? это вдруг «перекосы» в другое место) я поднял значение speed, но она по-прежнему не работает, я упускаю что-то с ним я интересно ..:/

решения (дается Kemal Fadillah): " Установите speed на 10 или 20. Th при этом анимация должна быть достаточно гладкой. Для того, чтобы сделать шаги изображения быстрее, вместо уменьшения левого сдвига на 1, попробуйте уменьшить его на 3.»

Answer 1

document.getElementById('ball').style.left возвращает '' (или undefined), если вы не установите свойство перед извлечением его. Вот почему вы получаете NaN от parseInt().

Edit:

Кажется, вы определение стиля в порядке (после того, как вы редактировали ваше сообщение). Вы можете попробовать использовать десятичную в parseInt():

alert(parseInt(document.getElementById('ball').style.left,10)); 

Это задокумен не косые, но использование его иногда помогает.

Edit II

Это происходит потому, что вы выполнение всех setTimeout ей в два раза, и вы их не очищая. Попробуйте это следующим образом:

var delay; 

function moveLeft(){ 
    : 
    if(delay){ // Add this if before all of your setTimeout() calls and in gameover() too 
    clearTimeout(delay); 
    } 
    delay=setTimeout(moveLeft, speed); 
    : 
} 

Установив тайм-аут, как это setTimeout(doFunction(),delaytime); выполняет doFunction rightaway из-за (), и снова после delaytime, что на самом деле слишком много рекурсии ...

Answer 2

Вы должны использовать JQuery, это гораздо проще. Попробуйте что-то вроде

$(function(){ 
$("img#ball").offset({top: 10px, left: 500px}); 
}); 

Более подробной информации можно можно найти здесь:

http://api.jquery.com/offset/

информация о JQuery вообще можно найти здесь:

http://jquery.com/

Answer 3

Это требует offsetLeft и offsetTop значения, пожалуйста, обратитесь к ссылке

This post

Answer 4

Вы не можете получить CSS стиль, используя element.style, если он объявлен во внешней таблице стилей. От MDN Документация:

Однако, это не полезно для изучения стиля элемента в целом, так как она представляет собой лишь заявления CSS, установленные в атрибуте встроенного стиля в элемента, а не те, которые приходят из правил стиля в других местах, например, правила стиля в разделе или внешние таблицы .

https://developer.mozilla.org/en/DOM/element.style

Вместо этого, вы должны будете использовать window.getComputedStyle(), чтобы получить свойства.

window.getComputedStyle(document.getElementById('ball')).left; // returns 500px