Как сделать перемещение изображения, нажав на кнопку с помощью Javascript?

Мне нужно написать код javascript внутри документа HTML, который имеет следующее поведение: При нажатии кнопки изображение начинает перемещаться (если оно еще не перемещается), один пиксель слева в секунду. Когда нажимается вторая кнопка, изображение перестает перемещаться и сразу же перемещается в исходные координаты.Как сделать перемещение изображения, нажав на кнопку с помощью Javascript?

Я получаю все на работу, кроме «кнопки», которая гласит «НАЧАТЬ». Прямо сейчас, если я нажимаю изображение, изображение перемещается влево 1 пиксель в секунду. Однако мне нужно перенести эту функцию на кнопку START.

Кто-нибудь знает, как это сделать? спасибо !!

Мой код выглядит следующим образом:

<html><head> 


<script> 

var timerid = null; 


function move() 
{ 
document.getElementById('cat').style.right = 
    parseInt(document.getElementById('cat').style.right) + 1 + 'px';  
} 

window.onload=function() 
{ 



document.getElementById('cat').onclick=function(){ 

    if(timerid == null){ 
     timerid = setInterval("move()", 10); 
    }else{ 
     clearInterval(timerid); 
     timerid = null; 
    } 
} 


var button2 = document.getElementById('button2'); 
button2.onclick= reloadPage; 

    function reloadPage(){ 
     window.location.reload(); 
    } 

} 


</script> 
</head> 
<body> 

<img id="cat" src="cat.jpg" style="position:absolute;right:5px"/> 

<div> 
<button id="button1" type="button" style="position:absolute;left:10px;top:190px"/>START</button> 
<button id="button2" type="button" style="position:absolute;left:10px;top:220px"/>STOP & RESET</button> 
</div> 

</body> 
</html>

источник

2013-03-29 tidydee

все было бы гораздо проще с помощью JQuery, который обеспечивает это из коробки с '.animate()' – techfoobar

Спасибо, я знаю! Мне не разрешено использовать JQuery для этого :( – tidydee

изменения cat в button1

document.getElementById('button1').onclick=function(){ 
        //--^^^^^^^^----here 
    if(timerid == null){ 
    timerid = setInterval("move()", 10); 
    }else{ 
    clearInterval(timerid); 
    timerid = null; 
    } 
}

источник

2013-03-29 07:12:53 bipen

Вы сэр .... ROCK !!!!!!!!!!! СПАСИБО !!! – tidydee

приветствую ... рад, что это помогло ... счастливое кодирование .. :) – bipen

HI Bipen, Вы, кажется, довольно хороший javascript-кодер. Могу я попросить вас взглянуть на другой фрагмент кода, с которым я борюсь. Это может быть проблемой. Я трачу часы на этот и ничего еще. См. Ссылку: http://stackoverflow.com/q/15696938/2147761 Ваша помощь очень ценится, и я благодарю вас заранее! – tidydee

Как сделать перемещение изображения, нажав на кнопку с помощью Javascript?

ответ

Смежные вопросы