Question

我正在开发一个网页，我想创建一个动画，根据它移动的方向，图像会有所不同。图像会在右/左屏幕边缘结束时发生变化。

我已经编码了我的对象的移动，但是我在屏幕边缘交换图像时遇到了问题。

在图片中，你可以看到我到目前为止所拥有的，以及我想要实现的目标。

我也把我的代码放在这里。

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

有人可以帮我解决这个问题吗？

Answer 1

你不能只做这样的事情：

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

}

一个动画javascript中的多个图像

1 个答案: