자바 스크립트/CSS는 : positionBackground

나는이 코드 그렇게하기 위해, 무한 내 배경을 이동하려는 배경으로 이동할 수 없습니다 :자바 스크립트/CSS는 : positionBackground

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

을하지만 그것은 작동하지 않습니다 ... 난 backgroundPosition을 표시 할 수없는 경우 .

몇 가지 아이디어가 있습니까? 자바 스크립트 애니메이션을 만드는 것이 좋은 방법일까요? 고마워.

출처

2013-09-27 Slevin

어디를'에 onLoad는();'정의? body 태그를'onLoad = "loadBG();로 바꾸어보십시오." – Divey

'= + 10' 뭐? 픽셀? x 또는 y 축을 따라가? 문자열에 10을 더하고 그 문자열이 작동하기를 바랍니다. 또한 애니메이션을 적용하는 좋은 방법이 아니며 대신 https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame을 살펴보십시오. –

backgroundPosition은 backrogund의 x 위치와 y 위치를 하나의 숫자가 아니라 단위로 표시하는 속성입니다.

당신은 같은 것을 수행해야합니다

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

출처

2013-09-27 15:16:57 Pipe

자바 스크립트/CSS는 : positionBackground

답변

관련 문제