Блог

Главная - Вопросы по программированию - Перемещение фона, похоже, не работает

Перемещение фона, похоже, не работает

#javascript #html #css

#javascript #HTML #css

Вопрос:

Итак, я пытаюсь заставить мой фон бесконечно перемещаться слева направо неоднократно. Я пробовал всевозможные вещи, но я не знаю, почему код не работает.

Вот мой код

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

Комментарии:

1. CSS:#section1{ ширина: 1600 пикселей; высота: 900 пикселей; граница: 1 пиксель сплошного красного цвета; фоновое изображение: url («../IMG/ Background.png»); размер фона: обложка; } (Этот сайт не позволил бы мне опубликовать этот код :/)

2. попробуйте сделать var «i» не нулевым, а int 0 😉

Ответ №1:

Вот обновленный код для вашего требования.

Вам нужно только передать метод перемещения в setInterval , не нужно вызывать move() после setInterval 

 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>

Ответ №2:

Вы можете использовать CSS анимацию для достижения этой цели.

 #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>

Комментарии:

1. Не думал о том, чтобы сделать это таким образом. Спасибо, что поделились :)!

2. Точно, я просто готовил что-то вроде этого