Динамический translate3d, добавив число за клик - PullRequest
Новая
       30

Динамический translate3d, добавив число за клик

0 голосов
/ 30 апреля 2019

Привет, поэтому я пытаюсь смоделировать стрелки в ползунке, где я перемещаю элементы влево и вправо.

Пока у меня есть элементы, перемещающиеся вправо, но только один раз.

https://i.gyazo.com/34a0ef4a5064c2942aca7c717a775e8b.mp4

Вот мой код до сих пор 

<script>
  (function(){
    const arrowLeft = document.querySelector('#video-tags-left');
    const arrowRight = document.querySelector('#video-tags-right');
    const tags = document.querySelector('.video-tags');
    const now = "740";

    arrowRight.addEventListener("click", function() {
      $(tags).css({
        "transform": "translate3d(" + -now + "px, 0px, 0px)",
        "transform-style": "preserve-3d"
       });
    });

    arrowLeft.addEventListener("click", function() {
      $(tags).css({
        "transform": "translate3d("+ +now+", 0px, 0px)",
        "transform-style": "preserve-3d"
       });
    });
}());
</script>

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

Поэтому я нажимаю один раз вправо 740, снова 1460 и т. Д., И наоборот, когда пользователь нажимает стрелку влево.

Ответы [ 2 ]

0 голосов
/ 30 апреля 2019

Вот некоторые проблемы с вашим кодом:

  1. Вы объявили "сейчас" как const, поэтому его значение нельзя изменить
  2. Вы объявили «сейчас» как строку типа, поэтому вы не можете выполнять какие-либо математические операции с ней (например, увеличивать или уменьшать)

Измените свой код на это: 

<script>
  (function(){
    const arrowLeft = document.querySelector('#video-tags-left');
    const arrowRight = document.querySelector('#video-tags-right');
    const tags = document.querySelector('.video-tags');
    let now = 740; // Declare "now" as variable of type number

    arrowRight.addEventListener("click", function() {
      now += 740; // Increment "now" by 740
      $(tags).css({
        "transform": "translate3d(" + now + "px, 0px, 0px)",
        "transform-style": "preserve-3d"
       });
    });

    arrowLeft.addEventListener("click", function() {
      now -= 740; // Decrement "now" by 740
      $(tags).css({
        "transform": "translate3d(" + now + "px, 0px, 0px)",
        "transform-style": "preserve-3d"
       });
    });
}());
</script>
0 голосов
/ 30 апреля 2019

Каждый раз, когда вы нажимаете на одну из стрелок, вы должны увеличивать / уменьшать значение now: 

<script>
    (function(){
        const arrowLeft = document.querySelector('#video-tags-left');
        const arrowRight = document.querySelector('#video-tags-right');
        const tags = document.querySelector('.video-tags');
        const SLIDER_WIDTH = 740;
        let now = 0;

        arrowRight.addEventListener("click", function() {
            now -= SLIDER_WIDTH;
            $(tags).css({
                "transform": "translate3d(" + now + "px, 0px, 0px)",
                "transform-style": "preserve-3d"
            });
        });

        arrowLeft.addEventListener("click", function() {
            now += SLIDER_WIDTH;
            $(tags).css({
                "transform": "translate3d("+ now + "px, 0px, 0px)",
                "transform-style": "preserve-3d"
            });
        });
    }());
</script>

Учтите, что вам также нужно будет проверить пределы вашего ползунка, чтобыВы не можете переместить ползунок в разделы, где нет контента.

...