前端：使用拖拽功能实现一个无限循环滚动的跑马灯

2023-10-29 17:57:46

虽然跑马灯在现代网络开发中似乎不太常见，但它们仍然可以在某些场景中发挥作用，例如展示不断变化的新闻标题、促销信息或其他需要吸引注意力的内容。本文将指导您使用拖拽功能实现一个具有无限循环滚动的跑马灯，从而增强您的前端开发技能。

需求分析

要构建一个具有拖拽功能的跑马灯，我们需要考虑以下要求：

提供一个组件，可以根据子元素的宽度自动决定是否进行滚动。
滚动应平滑、无限且可循环。

HTML

<div class="marquee-container">
  <ul class="marquee-list">
    <li>新闻标题 1</li>
    <li>新闻标题 2</li>
    <li>新闻标题 3</li>
    <!-- 其他新闻标题 -->
  </ul>
</div>

CSS

.marquee-container {
  width: 100%;
  overflow: hidden;
}

.marquee-list {
  display: flex;
  flex-direction: row;
  animation: marquee 15s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

JavaScript

// 获取跑马灯元素
const marquee = document.querySelector('.marquee-list');

// 获取跑马灯元素的宽度
const marqueeWidth = marquee.offsetWidth;

// 获取跑马灯子元素的总宽度
const listWidth = [...marquee.children].reduce((a, b) => a + b.offsetWidth, 0);

// 如果子元素的总宽度大于跑马灯宽度，则启用拖拽功能
if (listWidth > marqueeWidth) {
  marquee.style.cursor = 'grab';

  let isDragging = false;
  let startX;

  marquee.addEventListener('mousedown', (e) => {
    isDragging = true;
    startX = e.clientX;
  });

  marquee.addEventListener('mousemove', (e) => {
    if (!isDragging) return;

    const dx = e.clientX - startX;
    marquee.style.transform = `translateX(${dx}px)`;
  });

  marquee.addEventListener('mouseup', () => {
    isDragging = false;
  });
}