我从this code开始创建字幕,但我希望字幕从左到右而不是从右到左。我能够做到这一点,但现在文本不像原来那样循环。
想不通!
这就是我所做的,使字幕滚动到右边:
function MarqueeOne(selector, speed) {
const parentSelector = document.querySelector(selector);
const clone = parentSelector.innerHTML;
const firstElement = parentSelector.children[0];
let i = 0;
console.log(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);
}
我只是在第11行去掉了-${i}px
的- out。这颠倒了方向,但现在文本只是从屏幕上滚动下来。
下面是我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;
}
有没有什么建议可以让这个循环更好?
2条答案
按热度按时间6yt4nkrj1#
嗨,我已经编辑了你的代码,它是从左到右的幻灯片。我添加了flex-directionprop作为row-reverse到css,它工作得很好。新的css风格如下。
hk8txs482#
去掉减号的问题是,即使移动的方向是正确的,它也会在左边留下一个白色。