master

分支 (1)

管理

管理

master

hjdemo
/
table-moveup
/
index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表格滚动效果</title>
  <style>
    body { margin: 0; padding: 0; background-color: #0a1a2f; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
    .screen-container { width: 800px; height: 490px; background-color: #0a1a2f; padding: 20px; border-radius: 8px; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; }
    .table-title { color: #409eff; font-size: 20px; margin-bottom: 15px; text-align: center; flex-shrink: 0; }
    .table-wrapper { width: 100%; flex: 1; margin-bottom: 10px; display: flex; flex-direction: column; min-height: 0; }
    .table-header { flex-shrink: 0; width: 100%; height: 42px; }
    .header-table, .data-table { width: 100%; border-collapse: collapse; color: #e5eaf5; font-size: 16px; table-layout: fixed; }
    .header-table th, .data-table td { padding: 0 10px; text-align: center; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .header-table th:nth-child(1), .data-table td:nth-child(1) { width: 15%; }
    .header-table th:nth-child(2), .data-table td:nth-child(2) { width: 35%; }
    .header-table th:nth-child(3), .data-table td:nth-child(3) { width: 25%; }
    .header-table th:nth-child(4), .data-table td:nth-child(4) { width: 25%; }
    .header-table th { background-color: #1e3a5f; height: 40px; line-height: 40px; border: 1px solid #2d496e; box-sizing: border-box; }
    .scroll-table { width: 100%; flex: 1; overflow: hidden; position: relative; border: 1px solid #2d496e; box-sizing: border-box; min-height: 0; }
    .table-content { position: absolute; top: 0; left: 0; width: 100%; }
    .data-table tr { height: 52px; line-height: 50px; box-sizing: border-box; }
    .data-table td { border: 1px solid #1e3a5f; box-sizing: border-box; height: 50px; vertical-align: middle; }
    .data-table tr:nth-child(odd) { background-color: rgba(30, 58, 95, 0.3); }
    .data-table tr:hover { background-color: rgba(64, 158, 255, 0.2); }
    .control-btn { text-align: center; height: 40px; line-height: 40px; }
    button { padding: 8px 16px; margin: 0 10px; background-color: #409eff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; }
    button:hover { background-color: #66b1ff; }
    button:disabled { background-color: #909399; cursor: not-allowed; }
  </style>
</head>
<body>
<div class="screen-container">
  <div class="table-title">商品销售排行榜</div>
  <div class="table-wrapper">
    <div class="table-header">
      <table class="header-table">
        <tr>
          <th>序号</th>
          <th>产品名称</th>
          <th>数值</th>
          <th>增长率</th>
        </tr>
      </table>
    </div>
    <div class="scroll-table" id="scrollTable">
      <div class="table-content" id="tableContent"></div>
    </div>
  </div>
  <div class="control-btn">
    <button id="pauseBtn">暂停滚动</button>
    <button id="playBtn" disabled>继续滚动</button>
  </div>
</div>

<script>
  const tableData = [
    { id: 1, name: '产品A', value: '9876', rate: '+12.5%' },
    { id: 2, name: '产品B', value: '8765', rate: '+8.3%' },
    { id: 3, name: '产品C', value: '7654', rate: '-2.1%' },
    { id: 4, name: '产品D', value: '6543', rate: '+15.7%' },
    { id: 5, name: '产品E', value: '5432', rate: '+5.9%' },
    { id: 6, name: '产品F', value: '4321', rate: '-1.8%' },
    { id: 7, name: '产品G', value: '3210', rate: '+9.2%' },
    { id: 8, name: '产品H', value: '2109', rate: '+7.4%' }
  ];

  const tableContent = document.getElementById('tableContent');
  const scrollTable = document.getElementById('scrollTable');
  const pauseBtn = document.getElementById('pauseBtn');
  const playBtn = document.getElementById('playBtn');

  let scrollAnimationId = null;
  let pauseTimeoutId = null;
  let isScrolling = true;
  const rowHeight = 52;
  let topValue = 0;
  let targetTop = 0;
  let currentRowIndex = 0;
  let scrollSpeed = 2;
  let pauseDuration = 1500;
  let maxVisibleRows = 0;
  let scrollState = 'scrolling';

  function initTable() {
    renderDataTable([...tableData, ...tableData]);

    const availableHeight = scrollTable.clientHeight;
    maxVisibleRows = Math.floor(availableHeight / rowHeight);

    if (tableData.length <= maxVisibleRows) {
      pauseBtn.disabled = true;
      playBtn.disabled = true;
      pauseBtn.textContent = '数据不足';
      return false;
    }

    return true;
  }

  function renderDataTable(data) {
    const tableHtml = `<table class="data-table">
        ${data.map(item => `<tr>
            <td>${item.id}</td>
            <td>${item.name}</td>
            <td>${item.value}</td>
            <td style="color: ${item.rate.includes('-') ? '#f56c6c' : '#67c23a'}">${item.rate}</td>
          </tr>`).join('')}
      </table>`;
    tableContent.innerHTML = tableHtml;
  }

  function animateScroll() {
    if (!isScrolling) return;

    if (scrollState === 'scrolling') {
      const distance = targetTop - topValue;

      if (Math.abs(distance) <= scrollSpeed) {
        topValue = targetTop;
        tableContent.style.top = `${topValue}px`;

        if (currentRowIndex >= tableData.length) {
          topValue = 0;
          tableContent.style.top = `${topValue}px`;
          currentRowIndex = 0;
          renderDataTable([...tableData, ...tableData]);
          targetTop = 0;
        }

        scrollState = 'paused';

        pauseTimeoutId = setTimeout(() => {
          currentRowIndex++;
          targetTop = -currentRowIndex * rowHeight;
          scrollState = 'scrolling';
          scrollAnimationId = requestAnimationFrame(animateScroll);
        }, pauseDuration);
      } else {
        topValue += distance > 0 ? scrollSpeed : -scrollSpeed;
        tableContent.style.top = `${topValue}px`;
        scrollAnimationId = requestAnimationFrame(animateScroll);
      }
    }
  }

  function startScroll() {
    if (scrollAnimationId) cancelAnimationFrame(scrollAnimationId);
    if (pauseTimeoutId) clearTimeout(pauseTimeoutId);

    if (tableData.length > maxVisibleRows) {
      scrollState = 'scrolling';
      scrollAnimationId = requestAnimationFrame(animateScroll);
    }
  }

  function pauseScroll() {
    if (scrollAnimationId) {
      cancelAnimationFrame(scrollAnimationId);
      scrollAnimationId = null;
    }
    if (pauseTimeoutId) {
      clearTimeout(pauseTimeoutId);
      pauseTimeoutId = null;
    }
  }

  pauseBtn.addEventListener('click', () => {
    if (isScrolling) {
      pauseScroll();
      isScrolling = false;
      pauseBtn.disabled = true;
      playBtn.disabled = false;
      pauseBtn.textContent = '已暂停';
    }
  });

  playBtn.addEventListener('click', () => {
    if (!isScrolling && tableData.length > maxVisibleRows) {
      isScrolling = true;
      startScroll();
      pauseBtn.disabled = false;
      playBtn.disabled = true;
      pauseBtn.textContent = '暂停滚动';
    }
  });

  const isInitable = initTable();
  if (isInitable) {
    startScroll();
  }

  window.addEventListener('beforeunload', () => {
    if (scrollAnimationId) {
      cancelAnimationFrame(scrollAnimationId);
    }
    if (pauseTimeoutId) {
      clearTimeout(pauseTimeoutId);
    }
  });
</script>
</body>
</html>