Как заставить квадраты двигаться??? - JavaScript, Ajax

kaur · 29.01.2012, 14:48

Всем Доброго времени суток.

У меня возник вопрос следующий:

Дано задание в создать HTML-страницу в центре которой должен размещаться квадрат красного цвета, при нажатии на него, он должен менять цвет с красного на синий и менять свое положение, быть чуточку ниже и правее. менять местоположение мгновенно. А при нажатии на синий квадрат принимать исходную позицию и становиться красным.
Код я сделал но ен могу понять в чем ошибся, тк квадрат не кликается и не меняет ни цвет, ни местоположение. Прошу помочь разобраться в данном тупике. квадраты обязательно должны быть созданы в CSS а движение придать при помощи JavaScript.
В CSS и в JavaScript я не силен признаюсь, но задание необходимо выполнить. при помощи книг, форумов у меня вышел следующий код:

<html>
<head>
<script>
var p=1;
function t() {
if (p==1) {
var s = document.i1.style;
s.top = 20 + 'px';
s.left= 20 + 'px';
s.background = 'blue';
p=2;}
else {
var s = document.i1.style;
s.top = 10 + 'px';
s.left= 10 + 'px';
s.background = 'red';
p=1;}}
</script>
</head>
<body>
<center>
<div name="i1" style="width:150px; height:150px; background: red; top : 10px; left : 10px; position: relative;" onclick=t();> </div>
</center>
</body>
</html>

При том когда я брал картинки из вне, то есть указывал путь с локального компьютера, они работали, меняли цвета, сдвигались и, но после добавили условия использовать CSS, как только создал квадраты в CSS, движение прекратилось.

Прошу помочь решить данный Вопрос.

spein · 29.01.2012, 17:05

Заставил работать:

Код:

<html>
<head>
<script>
var p=1;
function t() {
  var s = document.getElementById("obj");
  if (p==1) {
    s.style.top = 20;
    s.style.left= 20;
    s.style.background = 'blue';
    p=2;
  }else {
    s.style.top = 10;
    s.style.left= 10;
    s.style.background = 'red';
    p=1;
  }
}
</script>
</head>
<body>
<center>
<div id="obj" style="width:150px; height:150px; background: red; top : 10px; left : 10px; position: absolute;" onclick=t();> </div>
</center>
</body>
</html>

29.01.2012, 14:48	#1
kaur Новичок Джуниор Регистрация: 29.01.2012 Сообщений: 1	Как заставить квадраты двигаться??? Всем Доброго времени суток. У меня возник вопрос следующий: Дано задание в создать HTML-страницу в центре которой должен размещаться квадрат красного цвета, при нажатии на него, он должен менять цвет с красного на синий и менять свое положение, быть чуточку ниже и правее. менять местоположение мгновенно. А при нажатии на синий квадрат принимать исходную позицию и становиться красным. Код я сделал но ен могу понять в чем ошибся, тк квадрат не кликается и не меняет ни цвет, ни местоположение. Прошу помочь разобраться в данном тупике. квадраты обязательно должны быть созданы в CSS а движение придать при помощи JavaScript. В CSS и в JavaScript я не силен признаюсь, но задание необходимо выполнить. при помощи книг, форумов у меня вышел следующий код: <html> <head> <script> var p=1; function t() { if (p==1) { var s = document.i1.style; s.top = 20 + 'px'; s.left= 20 + 'px'; s.background = 'blue'; p=2;} else { var s = document.i1.style; s.top = 10 + 'px'; s.left= 10 + 'px'; s.background = 'red'; p=1;}} </script> </head> <body> <center> <div name="i1" style="width:150px; height:150px; background: red; top : 10px; left : 10px; position: relative;" onclick=t();> </div> </center> </body> </html> При том когда я брал картинки из вне, то есть указывал путь с локального компьютера, они работали, меняли цвета, сдвигались и, но после добавили условия использовать CSS, как только создал квадраты в CSS, движение прекратилось. Прошу помочь решить данный Вопрос.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
как заставить объект двигаться по ромбу? Делфи	Женька Good	Помощь студентам	1	29.01.2012 11:47
Как заставить двигаться объект по форме	ВалекFCRK	Общие вопросы Delphi	2	10.11.2011 16:03
как заставить окружность двигаться в обратную сторону?	phasha	Помощь студентам	8	17.10.2011 18:54
Как заставить Image двигаться по прямой к указанной точке?	Yougan	Общие вопросы Delphi	6	30.05.2011 23:59
как заставить компонент Shape двигаться по ступенькам	Ogurez	Помощь студентам	1	31.10.2010 11:07