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);
});
Спасибо!