Попытка изменить направление javascript цикла выделения
Я работаю с этим кодом, чтобы создать бегущую строку, но я хочу, чтобы бегущая строка двигалась слева направо, а не справа налево. Я смог это сделать, но теперь текст не зацикливается, как в оригинале.
Не могу понять!
Вот что я сделал, чтобы прокрутить бегущую строку вправо:
function MarqueeOne(selector, speed) {
const parentSelector = document.querySelector(selector);
const clone = parentSelector.innerHTML;
const firstElement = parentSelector.children[0];
let i = 0;
console.info(firstElement);
parentSelector.insertAdjacentHTML('beforeend', clone);
parentSelector.insertAdjacentHTML('beforeend', clone);
setInterval(function () {
firstElement.style.marginLeft = `${i}px`;
if (i > firstElement.clientWidth) {
i = 0;
}
i = i + speed;
}, 0);
}
Я просто убрал - из -${i}px в строке 11. Это меняет направление, но теперь текст просто прокручивается за пределы экрана.
вот мой CSS:
.marquee-one {
overflow: hidden;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
display: flex;
color: white;
}
.marquee-one h1{
font-size: 5em;
white-space: nowrap;
text-transform: uppercase;
color: white;
}
любой совет о том, как сделать эту петлю правильно?
это не сработало, к сожалению:/
Вы не должны использовать свойство margin или left для создания Marquee. Вместо этого поищите, как правильно создать бегущую полосу прокрутки, используя переход или анимацию CSS3 и трансформацию перевода. Кроме того, использование setInterval 0 — очень плохая идея.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Привет, я отредактировал ваш код, и он скользит слева направо. Я добавил поддержку flex-direction как row-reverse в css, и он отлично работает. Новый стиль css ниже.
function Marquee(selector, speed) {
const parentSelector = document.querySelector(selector);
const clone = parentSelector.innerHTML;
parentSelector.insertAdjacentHTML('beforeend', clone);
parentSelector.insertAdjacentHTML('beforeend', clone);
const firstElement = parentSelector.children[0];
let i = 0;
setInterval(function () {
firstElement.style.marginRight = `-${i}px`;
if (i > firstElement.clientWidth) {
i = 0;
}
i = i + speed;
}, 0);
}
window.addEventListener('load', Marquee('.marquee', 0.2)).marquee {
overflow: hidden;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
display: flex;
flex-direction: row-reverse;
}
.marquee h1{
font-size: 5em;
white-space: nowrap;
text-transform: uppercase
}<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<title>Cemil</title></head>
<body>
<div class = "marquee">
<h1>Nepal * Himalayas * Mountains * Everest</h1>
</div>
</body>
</html>Это плохой совет (или продолжение исходного кода OP) использовать setInterval 0 и анимировать с помощью свойства margin.
@RokoC.Buljan RokoC.Buljan, я не говорю, что это правильный путь. я только что исправил проблему
Я знаю. Я не считаю это качественным ответом по этой конкретной причине. Видеть, как OP делает что-то ужасно неправильное, и не указывать на это или не предлагать вариант, улучшающий проблему, - это все равно, что бросать резиновую утку и водяной пистолет в человека, который изо всех сил пытается удержаться на плаву.
спасибо, я подумаю об этом в следующих ответах, сэр
Проблема, когда вы удаляете знак минус, заключается в том, что даже если движение происходит в правильном направлении, слева остается пустое место. Я предлагаю исправить это, переведя h1
function Marquee(selector, speed) {
const parentSelector = document.querySelector(selector);
const clone = parentSelector.innerHTML;
const firstElement = parentSelector.children[0];
let i = 0;
console.info(firstElement);
parentSelector.insertAdjacentHTML('beforeend', clone);
parentSelector.insertAdjacentHTML('beforeend', clone);
setInterval(function () {
firstElement.style.marginLeft = `${i}px`;
if (i > firstElement.clientWidth) {
i = 0;
}
i = i + speed;
}, 0);
}
//after window is completed load
//1 class selector for marquee
//2 marquee speed 0.2
window.addEventListener('load', Marquee('.marquee', 0.2)).marquee {
overflow: hidden;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
display: flex;
}
.marquee h1{
font-size: 5em;
white-space: nowrap;
text-transform: uppercase;
translate: -100% 0; /* I've added this line */
}<div class = "marquee">
<h1>Nepal * Himalayas * Mountains * Everest</h1>
</div>setInterval 0 — действительно плохая идея. Почему бы не предложить бесконечный линейный переход CSS3 с использованием перевода и ключевых кадров?
Я согласен, я сосредоточился только на направлении текста
Попробуйте установить
i = -firstElement.clientWidth;вместо 0 в операторе if.