Доброго всем времени суток! Я тут новенький (как на форуме, так и в JavaScript(только начал)), так что просу строго не судить и сразу же приношу свои извинения, если что-то не в том разделе пишу или т.п.
Собственно в чём проблема:
Необходимо привести имитацию солнечного дня, а именно: есть 7 положений солнца:
1-е - 7 часов - 90 градусов;
2-е - 9 часов - 120 градусов;
3-е - 11 часов - 150 градусов;
4-е - 13 часов - 180 градусов;
5-е - 15 часов - 210 градусов;
6-е - 17 часов - 240 градусов;
7-е - 19 часов - 270 градусов;
Вопрос собственно в том, как именно это сделать?
Мои соображения:
Я так понимаю необходимо математически описать круг и каким-то образом передать координаты обету?! Описать получается только синус(косинус), а при любых других вариантах объект движется только вперед и назад.
Не понимаю как это сделать!
Вот что есть:
------------------------------------------------------------------
В index.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="./style_sytki.css" />
<script type="text/javascript" src="./sutki.js"></script>
</head>
<body>
<img src="./img/sun.png" alt="Солнце" id="sun" />
<script type="text/javascript">
var d = document;
var l_sun, r_sun = setInterval(right_sun, 30);
var ch = setInterval(sun_change, 200);
var direct;
var grad = 0, pi = Math.PI, rad = pi/180;
var sin = setInterval(sinus, 30);
</script>
</body>
</html>
----------------------------------------------------------------
В style_sytki.css
html, body {
height: 100%;
}
body {
margin: 0;
background-image: url(./img/bg.jpg);
}
img {
display: block;
position: absolute;
}
#sun {
margin-top: 200px;
-------------------------------------------------------------------
В sutki.js:
function sun_change() {
var pict = d.getElementById('sun');
if (direct == 'right') {
pict.src = './img/sun.png';
} else if (direct == 'left') {
pict.src = './img/sun1.png';
}
}
right_sun = function() {
var obj = d.getElementById('sun');
if (obj.offsetLeft < (d.body.offsetWidth - obj.offsetWidth)){
obj.style.left = obj.offsetLeft + 1 + 'px';
direct = 'right';
} else {
clearInterval(r_sun);
l_sun = setInterval(left_sun, 30);
direct = 'left';
}
}
left_sun = function() {
var obj = d.getElementById('sun');
if (obj.offsetLeft > 0)
obj.style.left = obj.offsetLeft + -1 + 'px';
else {
clearInterval(l_sun);
r_sun = setInterval(right_sun, 30);
}
}
var sinus = function() {
grad == 360 ? grad = 0 : grad++;
var position_sun = parseInt(200*Math.cos(rad * grad));
d.getElementById('sun').style.top = position_sun + 'px';
}
------------------------------------------------------------------
Вот как бы и всё! Подскажите, как и что нужно сделать чтобы заставить его двигаться по кругу!
Всем спасибо!