Я разрабатываю веб-страницу, и я хотел бы создать анимацию, изображения которой будут отличаться в зависимости от направления движения. Изображения изменились бы в конце правого/левого края экрана.
Я закодировал движение своего объекта, но у меня возникла проблема с заменой изображений по краям экрана.
На картинке вы можете видеть, что у меня есть, и чего я хотел бы достичь.
Я также помещаю здесь свой код.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>animate demo</title>
<style>
div { background: url(bus.png);
position: absolute;
left: 0px;
width: 265px;
height: 47px;
margin: 5px; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<br>
<br>
<br>
<br>
<br>
<div class="block"></div>
<script type="text/javascript">
$width = $(window).width();
for($count = 0; $count != 100; $count++){
for($a=1; $a <= ($width/10); $a++){
$( ".block" ).animate({ "left": "+=10px" }, 100 );
} for($a=1; $a <= ($width/10); $a++){
$( ".block" ).animate({ "left": "-=10px" }, 100 );
}
}
</script>
</body>
</html>
http://i40.tinypic.com/2wg581y.jpg
Скажем, что другим изображением будет tram.png
Может ли кто-нибудь помочь мне решить эту проблему, пожалуйста?
Разве вы не можете просто сделать что-то вроде этого:
for ($count = 0; $count != 100; $count++){
for($a=1; $a <= ($width/10); $a++){
$( ".block" ).animate({ "left": "+=10px" }, 100 );
}
$(".block").css({'backgroundImage': 'tram.png'});
for($a=1; $a <= ($width/10); $a++){
$( ".block" ).animate({ "left": "-=10px" }, 100 );
}
$(".block").css({'backgroundImage': 'bus.png'});
}