多个图像在一个动画javascript

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

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

在图片中，您可以看到我到目前为止所取得的成果，以及我想实现的目标。

我也在这里把我的代码。

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

谁能帮我解决这个问题，好吗？

来源

2013-11-27 Martinsh

你就不能这样做：

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

}

来源

2013-11-27 22:39:34 koenpeters

不幸的是，仍然没有工作:( – Martinsh

多个图像在一个动画javascript

回答

相关问题