多個圖像在一個動畫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

回答

相關問題