Проблема с анимацией сдвига изображения по оси 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, время: 15:28. |