Question

所以我试图让我的背景不断地从左到右反复移动。我尝试了各种方法，但是我不知道为什么代码不起作用。

这是我的代码

HTML：

<html>
  <head>
      <meta charset="utf-8" />

      <script src="JS/javascript.js"></script>
  </head>

  <body>
    <main>

    </main>
    <div id="section1"></div>
  </body>
</html>

Javascript：

var i=null;

window.onload = function(){
    var move = setInterval(move, 30);
    move();
}

function move(){
    i++;
    document.getElementById("section1").style.backgroundPosition=i+"px";
}

Answer 1

这是您要求的更新代码。

您只需要将move方法传递给setInterval，不需要在setInterval之后调用move（）

var i=1;
function move(){
    i++;
    document.getElementById("section1").style.backgroundPosition=i+"px";
}
window.onload = function(){
    var move1 = setInterval(move, 30);
    //move();
}

#section1{
height: 200px;
background-image: url('https://cdn.pixabay.com/photo/2017/01/08/21/11/wood-1963988__340.jpg')
}

<html>
  <head>
      <meta charset="utf-8" />

      <script src="JS/javascript.js"></script>
  </head>

  <body>
    <main>

    </main>
    <div id="section1"></div>
  </body>
</html>

Answer 2

您可以使用CSS animation来实现。

#section1 {
  width: 200px;
  height: 200px;
  background: url('http://placehold.it/1000?text=test image');
  background-size:cover;
  animation-duration: 3s;
  animation-name: scroll;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes scroll {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 200px 0;
  }
}

<div id="section1"></div>

移动背景似乎不起作用

2 个答案: