0

我想无限地移动我的背景，为此我编写了以下代码：

    html, body {
    margin : 0;
    padding: 0;
    width: 100%;
    height: 100%;
    cursor: url('../assets/img/ship.cur'), auto;
    background-color : #000;
}

#background {
    position : absolute;
    background-image: url('../assets/img/littlestars.png');
    height : 720px;
    width : 1280px;
}

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <link rel="stylesheet" href="../style/home.css">
  <script language=javascript src="../js/navigate.js"> </script>
  <script language=javascript src="../js/background.js"> </script>
</head>
<body onLoad="onLoad(); loadBG();">
  <div id="background"> </div>

</body>
</html>

function loadBG() {
    window.setInterval(moveStars, 100);
}

function moveStars() {
    var bg = document.getElementById("background");
     bg.style.backgroundPosition += 10;
}

但它不起作用......如果我不能显示背景位置。

一些想法？这是创建javascript动画的好方法吗？谢谢。

4

1 回答 1

0

backgroundPosition 是一个属性，以单位表示背景的 x,y 位置，而不是单个数字。

您需要执行以下操作：

var posx = 0;
function moveStars() {
    var bg = document.getElementById("background");
    posx+=10;
    bg.style.backgroundPosition = posx+"px 0";
}
于 2013-09-27T15:16:57.497 回答