var bgx = 0; //value for background-position
$(document).ready(function() {
\t $(this).click(function(){
\t $("#cheat").append('<img src="images/cheat.gif"></img>');
\t $("#bike").animate({top: '250px', }, 10000);
\t });
\t
\t parallax(); //
\t function parallax(){ //animate the background-position
$("#background1").animate({backgroundPosition: bgx-=1000}, 100000, "linear");
$("#background2").animate({backgroundPosition: bgx-=1000}, 80000, "linear");
$("#background3").animate({backgroundPosition: bgx-=1000}, 50000, "linear");
$("#background4").animate({backgroundPosition: bgx-=1000}, 10000, "linear", parallax); //recall function
}
});
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: black;
}
img {
height: 100%;
width: auto;
position: absolute;
}
#background0 {
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
background-image: url(../images/bg0.png);
background-repeat: repeat-x;
background-color: green;
}
#background1 {
\t width: 100%;
height: 100%;
position: absolute;
z-index: 1;
background-image: url(../images/bg1.png);
background-repeat: repeat-x;
background-position: 0;
}
#background2 {
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
background-image: url(../images/bg2.png);
background-repeat: repeat-x;
background-position: 0;
}
#background3 {
width: 100%;
height: 100%;
position: absolute;
z-index: 3;
background-image: url(../images/bg3.png);
background-repeat: repeat-x;
background-position: 0;
}
#background4 {
width: 100%;
height: 100%;
position: absolute;
z-index: 4;
background-image: url(../images/bg4.png);
background-repeat: repeat-x;
background-position: 0;
}
#bike {
\t width: 100px;
\t height: 100px;
\t top: 635px;
\t left: 45%;
\t position: absolute;
z-index: 4;
}
#cheat {
width: 64px;
height: 64px;
position: absolute;
top: 10px;
left: 10px;
}
<!DOCTYPE html>
<html>
\t <head>
\t <meta charset="utf-8">
\t \t <title>MS01</title>
\t \t <link href="css/style1.css" rel="stylesheet" type="text/css">
\t \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
\t \t <script src="js/script.js"></script>
\t </head>
\t <body>
\t \t <div id="background0"></div>
\t \t <div id="background1"></div>
\t \t <div id="background2"></div>
\t \t <div id="background3"></div>
\t \t <div id="background4"></div>
\t \t <div id="bike"><img src="images/car.png"></div>
\t \t <div id="cheat"></div>
\t </body>
</html>
請提供更多，導致該問題的代碼。什麼是被引用的元素？變量'櫃檯'在哪裏被宣佈和改變？什麼是'bgx'用於？對於關於性能問題的問題，需要多於幾行的隔離代碼。 –
好的，只是試了一下（用我自己的圖片 - 所以不會是相同的大小等），並且它在IE中很好，在FF和Chrome（所有PC）中都很不穩定。嘗試CSS動畫和轉換可能會更好，而不是在循環中執行動畫。我會去一個或另一個 - 循環和調整位置（不是很好），或CSS（更好）。看起來您正在進入循環，開始動畫，然後在第一個動畫完成之前再次敲擊循環（幾乎是立即）。循環正在積累動畫。 –