jquery 尝试反转marquee循环的方向javascript

qcuzuvrc 于 2023-04-20 发布在 jQuery

关注(0)|答案(2)|浏览(129)

我从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;
}

有没有什么建议可以让这个循环更好？

jquery

来源：https://stackoverflow.com/questions/75999292/trying-to-reverse-the-direction-of-marquee-loop-javascript

2条答案

按热度按时间

6yt4nkrj1#

嗨，我已经编辑了你的代码，它是从左到右的幻灯片。我添加了flex-directionprop作为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>

赞(0）回复(0）举报 2023-04-20

hk8txs482#

去掉减号的问题是，即使移动的方向是正确的，它也会在左边留下一个白色。

function Marquee(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);
}

//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>

赞(0）回复(0）举报 2023-04-20

我来回答

jquery 尝试反转marquee循环的方向javascript

2条答案

相关问题

热门标签

最新问答