Несколько изображений в одном анимации JavaScript

0

Я разрабатываю веб-страницу, и я хотел бы создать анимацию, изображения которой будут отличаться в зависимости от направления движения. Изображения изменились бы в конце правого/левого края экрана.

Я закодировал движение своего объекта, но у меня возникла проблема с заменой изображений по краям экрана.

На картинке вы можете видеть, что у меня есть, и чего я хотел бы достичь.

Я также помещаю здесь свой код.

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

Может ли кто-нибудь помочь мне решить эту проблему, пожалуйста?

Теги:
image
animation

1 ответ

0

Разве вы не можете просто сделать что-то вроде этого:

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

}
  • 0
    К сожалению, это все еще не работает :(

Ещё вопросы

Сообщество Overcoder
Наверх
Меню