Форум

rudolf14 · #1 (**permalink**) 09.01.2009, 19:28

привет всем ребята!!дело в том что я учусь в 9 классе и изучаю программирование самостоятельно без никакой помоши!!!
но вот случилось так чтоб мне оч понадобтлось помощь профессионаолов!!
я написал код для передвижения картинки при клике на клавишу влево(стрелку) картинка должна идти направо и при клике влево на лево!!
скажу честно я оч старался но ничего не получилось может вы напишите этот код !!я вас оч прошу,но пока воот мой код:

<html>
<head>
function plus()
{

var pos2 = 0;
document.onkeydown=pos2++;
document.onkeyup=pos2--;
document.getElementById("PerSonag").style.left= pos2;
}
</script>
<body onKeyPress="plus()">
<div style = '{position: absolute; left: 5; top: 800;}' id="PerSonag">
<img src="pips6.gif">
</div>
</body>

</html>

очень надеюсь на вашу поддержку и помощ!!!

Octane · #2 (**permalink**) 09.01.2009, 20:11

Сообщение от rudolf14

изучаю программирование самостоятельно без никакой помоши!!!

Напрасно, купи лучше себе свежие книжки по HTML/CSS и JavaScript, и начинай изучать, если есть интерес.

В твоем коде много ошибок, а работа с событиями клавиатуры очень не простой момент в JavaScript, который требует некоторых знаний, которых, видимо, у тебя еще нет. Поэтому, если мы напишем за тебя решение твоей задачки, это не принесет тебе никакой пользы, так что учи дальше и разбирайся :-)

Андрей Параничев · #3 (**permalink**) 09.01.2009, 20:37

Обработка событий с клавиатуры не самая простая задача в рамках JavaScript. В твоем коде много ошибок как в скрипте, так и в HTML, и я бы советовал для начала прочитать статьи на нашем сайте, и вообще статьи в интернете на эту тему. Решение вряд ли поможет тебе, но можешь попробовать разобраться:

<html>
<head>
<script type="text/javascript">
function move(e) {
    // Кросс-браузерное получение объекта событие:
    e = e || window.event;
    
    // Получаем keyCode:
    var keyCode = e.keyCode;

    // Берем элемент:
    var el= document.getElementById("PerSonag");

    // Определяем нажатие клавиш "влево", "вверх"
    // "вправо" и "вниз", коды клавиш 37, 38, 39, 40:
    if (keyCode == 37) {
        el.style.left = parseInt(el.style.left || 0) - 2;
    } else if (keyCode == 38) {
        el.style.top = parseInt(el.style.top || 0) - 2;
    } else if (keyCode == 39) {
        el.style.left = parseInt(el.style.left || 0) + 2;
    } else if (keyCode == 40) {
        el.style.top = parseInt(el.style.top || 0) + 2;
    } else {
        // Если нажаты другие клавиши: выходим
        return;
    }

    // Отменяем действие по умолчанию:
    e.preventDefault(); // Gecko, ...
    e.returnValue = false; // IE
}

// Устанавливаем обработчик на весь документ:
document.onkeydown = move;
</script>
</head>
<body>
<div style="position: absolute; left: 0; top: 0;" id="PerSonag">
<img src="pips6.gif">
</div>
</body>
</html>

#4 (**permalink**) 09.01.2009, 20:41

я очень рад что вы мне постарались и лдаже оч много помогли!!
я прочитал около 4 книг по яве!!!!!
мой мозг устал от такой нагрузки!!
вот почему я попросил вашей помощи!спасибо огромное за советы и подсказки!

#5 (**permalink**) 09.01.2009, 21:00

дорогие друзья!!!
по вашему совету я скачал учебник классный и начинаю читать!!!!!
спасибо за советы!!
Я ПОЙДУ ЧИТАТЬ!!

Kolyaj · #6 (**permalink**) 09.01.2009, 22:02

Про изучение русского языка только не забывай.

Ilya · #7 (**permalink**) 09.01.2009, 23:17

Еще вариант!

<html>
<head>
<script type="text/javascript">
function fn1(evt) {
	var var1 = document.getElementById("img1"); //Ссылка на объект
	var1.style.position = "absolute"; // Задаем абсолютное позиционирование
	var x = var1.offsetLeft; //Определяем координату отступа (по оси x) от родительского элемента
	switch(evt.keyCode) { //Объект события, определяющий какая клавиша нажата (В системе Unicode)
		case 37: //Код клавиши со стрелкой влево (В системе Unicode)
		x--; //Сдвиг на 1 пиксел влево
		var1.style.left = x; //Новое значение координаты
		break;
		case 39: //Код клавиши со стрелкой вправо (В системе Unicode)
		x++; //Сдвиг на 1 пиксел вправо
		var1.style.left = x; //Новое значение координаты
		break;
	}
}
</script>
</head>
<body onkeydown="fn1(event)" onkeypress="fn1(event)" onkeyup="fn1(event)">
<div id="img1">
<img src="img.gif" />
</div>
</body>
</html>

#8 (**permalink**) 10.01.2009, 09:25

спасиб те за твой варант!!!!!!
огромное спасибо!

HelpeR · #9 (**permalink**) 10.01.2009, 13:05

во всех вариантах не дописано, что это пиксели.

var1.style.left = x+'px'
el.style.left = parseInt(el.style.left || 0) + 2+'px';

Все таки изменяются значения css

Zibba · #10 (**permalink**) 12.01.2009, 13:59

Параллельно возник вопрос, во всех браузерах кроме оперы скрипты отрабатывают нормально. Вот только если везде зажать и держать клавишу то объект будет перемещаться все время, в опере приходится клавишу отжимать и нажимать заново, как это обойти!?

Форум

Справочник

Discord чат

Курсы javascript