Здравствуйте, столкнулся с некоторой проблемой при решении следующей задачи: нужно внутри дива (высота 200px ширина 300px) перемещать другой див (30x30px) чтобы он сам по себе начинал движение по диагонали и отталкивался от границы дива-родителя. Я начал реализовывать это самым примитивным способом, чтобы в процессе апгрейдить все по феншую.
Сейчас я приведу код html файла и css файла.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Ололо шарик</title>
<link href="circus.css" rel="stylesheet" type="text/css">
</head>
<body onload="hod()">
<script>
function hod() {
if (ball.style.pixelTop<170) {
ball.style.pixelTop+=2;
ball.style.pixelLeft+=2;
setTimeout("hod()", 63);
}
}
</script>
<div id="field">
<div id="ball">
</div>
</body>
</html>
__________________________________________________ ________
#field {
padding: 0;
margin: 0;
width: 300px;
height: 200px;
border: 1px solid black;
position:absolute;
background-image: url('fieldbg.jpg');
}
#ball {
position:absolute;
left:0;
top:0;
padding: 0;
margin: 0;
width: 28px;
height: 28px;
border: 1px solid black;
background-color: red;
-moz-border-radius: 14px;
border-radius: 14px;
background-image: url('ballface.jpg');
}
Собственно сабж. Я довел дело только до того чтобы шарик достиг нижней границы дива-родителя. Дальше я хочу явно указать куда и докуда двигаться аналогично коду выше. Но поскольку я в JS пока еще чайник обращаюсь к вам за советом. Я пробовал после if втыкать else, но ничего не получилось.
P.S. повтор, но никаких других способов пока не хочу.
Здесь можно посмотреть что получилось