Форум

Alyona97 · #1 (**permalink**) 13.01.2015, 16:36

Возникла проблема с написанием кода анимации сдвига картинки вниз по экрану браузера. Прилагаю весь код html документа, ибо скорее всего ошибок там много.. Намучалась уже с этой анимацией. Вроде просто все, но картинка не едет никуда( Помогите, пожалуйста. Может я делаю что не так? Или код в корне неверный? Буду премного благодарна!)

<!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>

Alyona97 · #2 (**permalink**) 13.01.2015, 16:39

Сама задача состояла в том, чтобы картинка при загрузки страницы съезжала вниз на 50 px.

рони · #3 (**permalink**) 13.01.2015, 16:49

Сообщение от Alyona97

onload="move(this)"

function move(obj){
var element = obj;

caetus · #4 (**permalink**) 13.01.2015, 23:34

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';
}

Форум

Справочник

Discord чат

Курсы javascript