Как мне автоматически переместить изображение в цикле, по нажатию кнопки, используя JS? - PullRequest
0 голосов
/ 23 сентября 2018

Я пытаюсь написать функцию, которая перемещает мое изображение лица с одной стороны контейнера на другую в цикле одним нажатием кнопки.Мне нужна функция в JavaScript, которая автоматически перемещает / анимирует объект (изображение) для горизонтального перемещения в моем контейнере.Каждый раз, когда я нажимаю кнопку «Пуск» или даже обновляю страницу, я не могу даже переместить свое изображение.Я застрял, и помощь будет высоко ценится.Мой код ниже, так что я могу получить обратную связь.Мой Javascript, HTML и CSS находятся в отдельном файле.

var start = anime({
      targets: 'img.face',
      translateX: [{
          value: 100,
          duration: 1200
        },
        {
          value: 0,
          duration: 800
        }
      ],
      rotate: '1turn',
      duration: 2000,
      loop: true
    });

    document.querySelector('button').onclick = start.play();

<!-- language: lang-css -->

    body {
      text-align: center;
    }

    button {
      color: red;
      background: lightblue;
      font-family: Impact, 'Arial Narrow Bold', sans-serif;
    }

    .face {
      position: relative;
      width: 50px;
      height: 50px;
    }

    #container {
      position: absolute;
      width: 1000px;
      height: 500px;
      background: aqua;
      border: 20px lightpink solid;
      margin: 20px 150px 20px 150px;
    }

<!-- language: lang-html -->

    <div>
      <button id="start">Start</button>
    </div>
    <div id="container">
      <img class="face" src="https://previews.123rf.com/images/jemastock/jemastock1705/jemastock170504269/77700505-color-pencil-cartoon-front-view-face-guy-with-hairstyle-vector-illustration.jpg" alt="">
    </div>

<!-- end snippet -->

1 Ответ

0 голосов
/ 23 сентября 2018

Изменить

document.querySelector('button').onclick = start.play();

На

document.querySelector('button').onclick = start.play;

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...