Проблема с анимацией сдвига изображения по оси y
Возникла проблема с написанием кода анимации сдвига картинки вниз по экрану браузера. Прилагаю весь код html документа, ибо скорее всего ошибок там много.. Намучалась уже с этой анимацией. Вроде просто все, но картинка не едет никуда( Помогите, пожалуйста. Может я делаю что не так? Или код в корне неверный? Буду премного благодарна!) :help: :) :)
<!DOCTYPE html> <html> <meta charset="utf-8"> <head>
<script type="text/javascript">
function move(){
var element = document.getElementById("images");
var top = parseInt(element.style.top);
for(var i=50;i>0;i--0){
top++;
element.style.top = top + "px";
}
}
</script>
</head> <style type="text/css"> body{ background-image: url(bg.jpg); } table{ table-layout: fixed; width: 80%; margin: auto; } </style> <body> <img src="1.jpg" width=100%> <table id="t"> <tr> <th><font size="5" color="white"> <a href="MAIN.html"><img src="studio.jpg" align="center" width="200" height="50"></a></font></th> <th><font size="5" color="white"> <a href="price.html"><img src="price.jpg" align="center" width="200" height="50"></a></font></th> <th><font size="5" color="white"> <a href="contact.html"><img src="contact.jpg" align="center" width="200" height="50"></a></font></th> </tr> </table> <img src="back.png" width="1200" height="400" id="images" style="position:absolute; top: 270px" onload="move()"> </body> </html> |
Сама задача состояла в том, чтобы картинка при загрузки страницы съезжала вниз на 50 px.
|
Цитата:
var element = obj; |
function animate (obj) {
var start = +new Date();
var timer = setInterval(function(){
var progress = (+new Date() - start) obj.delay// время анимации
if(progress > 1) progress = 1;
obj.fn(progress);
if(progress == 1) clearInterval(timer):
}, 20)
}
window.onload = animate({
delay: 500,
element: document.getElementById('div'),
fn: function (progress) {
this.element.style.top = 50 * progress + 'px';
}
|
| Часовой пояс GMT +3, время: 08:40. |