Форум

Nexus · #11 (**permalink**) 18.01.2018, 16:51

LADYX, так работает?

document.querySelector('.marquee_pause').onclick = function() {
    interval=(this.classList.toggle('marquee_pause_active'),interval?(clearInterval(interval),0):setInterval(move,20));
}

Dilettante_Pro · #12 (**permalink**) 18.01.2018, 16:56

LADYX,
toggleClass() - это метод jQuery.

На чистом JS надо classList.toggle()

И в этом варианте его надо вынести из условия или использовать второй вариант, т.к. toggle сам проверяет условие

LADYX · #13 (**permalink**) 18.01.2018, 17:38

Dilettante_Pro,
понял. Да, с чистым javascript-ом сложнее конечно)
Nexus,

Сообщение от Nexus

LADYX, так работает?
document.querySelector('.marquee_pause').onclick = function() {
interval=(this.classList.toggle('marquee_p ause_active'),interval?(clearInterval(interval),0) :setInterval(move,20));
}

да, так работает.
В итоге получается вот так:

window.addEventListener("load", function() {
  var wrapper = document.querySelector(".currency_quotation"),
  marquee = document.querySelector("#marquee"),
  wrapperWidth = wrapper.offsetWidth,
  marqueeWidth = marquee.scrollWidth,
  currentTX = wrapperWidth;
  wrapper.addEventListener("mouseenter", function() {
    wrapper.classList.remove("move");
  });
  wrapper.addEventListener("mouseleave", function() {
    wrapper.classList.add("move");
  });
  window.addEventListener("resize", function() {
  wrapperWidth = wrapper.offsetWidth;
  marqueeWidth = marquee.scrollWidth;
  currentTX = wrapperWidth;
})

document.querySelector('.marquee_pause').onclick = function() {
    interval=(this.classList.toggle('marquee_pause_active'),interval?(clearInterval(interval),0):setInterval(move,20));
}

  function move() {
    if (wrapper.classList.contains("move")) {
      currentTX--;
    }
    if (-currentTX >= marqueeWidth) {
      currentTX = wrapperWidth;
    }
    marquee.style.transform = "translateX(" + currentTX + "px)";
  }
  var interval = setInterval(move, 20);
});

Спасибо!

Dilettante_Pro · #14 (**permalink**) 18.01.2018, 18:13

LADYX,
А если так?

document.querySelector('.marquee_pause').onclick = function() {
     wrapper.classList.toggle("move");
     this.classList.toggle('marquee_pause_active');
 }

LADYX · #15 (**permalink**) 18.01.2018, 18:18

Dilettante_Pro,

Сообщение от Dilettante_Pro

LADYX,
А если так?
1
document.querySelector('.marquee_pause').onclick = function() {
2
wrapper.classList.toggle("move");
3
this.classList.toggle('marquee_pause_act ive');
4
}

а так класс присваивается, но пауза не работает

Dilettante_Pro · #16 (**permalink**) 18.01.2018, 18:32

Как это не работает?

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style>
.currency_quotation {
  width: 100%;
  overflow: hidden;
  position: relative;
}

#marquee {
  display:  inline-block;
  background-color: #FFD700;
  white-space: nowrap;
  transform: translateX(100%);
}

#marquee p {
  display: inline;
  margin-right: 50px;
}
.marquee_pause_active { background-color:red;}
</style>
  <script>
window.addEventListener("load", function() {
  var wrapper = document.querySelector(".currency_quotation"),
  marquee = document.querySelector("#marquee"),
  wrapperWidth = wrapper.offsetWidth,
  marqueeWidth = marquee.scrollWidth,
  currentTX = wrapperWidth;
  wrapper.addEventListener("mouseenter", function() {
    wrapper.classList.remove("move");
  });
  wrapper.addEventListener("mouseleave", function() {
    wrapper.classList.add("move");
  });
  window.addEventListener("resize", function() {
  wrapperWidth = wrapper.offsetWidth;
  marqueeWidth = marquee.scrollWidth;
  currentTX = wrapperWidth;
})
document.querySelector('.marquee_pause').onclick = function() {
     wrapper.classList.toggle("move");
     this.classList.toggle('marquee_pause_active');
 }
  function move() {
    if (wrapper.classList.contains("move")) {
      currentTX--;
    }
    if (-currentTX >= marqueeWidth) {
      currentTX = wrapperWidth;
    }
    marquee.style.transform = "translateX(" + currentTX + "px)";
  }
  var interval = setInterval(move, 20);
});
  </script>
</head>

<body>

<div class="currency_quotation move">
  <div id=marquee>
    <p>Старт прошел в ночь на 8 января 2018 года с пускового комплекса SLC-40 на мысе Канаверал во Флориде..</p>
    <p>Стратегическое командование США сообщило, что не зафиксировала новый военный спутник на заданной орбите. Некоторые СМИ уже предположили, что американский спутник-шпион упал в океан. В компании Илона Маска утверждали, что, по их данным, Falcon 9 отработал в штатном режиме. Позже в SpaceX начали расследование. Уже заявлено, что «к настоящему моменту нет признаков саботажа или другого вмешательства» в процесс запуска спутника.</p>
  </div>
</div>
<button class="marquee_pause">Pause</button>
</body>
</html>

LADYX · #17 (**permalink**) 18.01.2018, 19:04

Сообщение от Dilettante_Pro

Как это не работает?

Dilettante_Pro,
странно конечно. Здесь работает. У себя заменяю, перестает работать пауза. А класс, как и говорил, добавляется.

Форум

Справочник

Discord чат

Курсы javascript