原生js实现文字行垂直向上滚动无限循环

效果：

image

 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文字每隔一定时间向上滚动</title>
  <!-- 引入 jQuery（确保已引入） -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    * {
      margin: 0px;
      padding: 0px;
      border: 0px;
    }

    body {
      font-size: 12px
    }

    .scroll-warp {
      height: 40px; /* 假设每个 li 高度是 40px，只显示一行 */
      overflow: hidden;
      position: relative;
    }

  .vertical-container {
    margin: 0;
    padding: 0;
    list-style: none;
    transition: transform 0.5s ease-in-out;
  }

  .scrollItem {
    height: 40px;
    line-height: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
    
  </style>
</head>

<body>
  <div class="scroll-warp" id="scroll-warp">
    <ul class="vertical-container" id="svertical-container">
          <li class="t-long scrollItem">
                <a href="#" rel="noopener noreferrer" target="_blank" title="A集团关于进一步做好疫情防控期间A大厦开交易活动的通知">
                <span class="time">2025-10-14</span>
                <span class="t-long">A集团关于进一步做好疫情防控期间A大厦开交易活动的通知</span>
            </a>
          </li>
          <li class="t-long scrollItem">
                <a href="#" rel="noopener noreferrer" target="_blank" title="关于有序恢复在A大厦开有关活动的通知">
                <span class="time">2025-10-14</span>
                <span class="t-long">关于有序恢复在A大厦有关活动的通知</span>
            </a>
          </li>
          <li class="t-long scrollItem">
                <a href="#" rel="noopener noreferrer" target="_blank" title="A市投资咨询有限公司国有资产招租公告">
                <span class="time">2025-10-14</span>
                <span class="t-long">A市投资咨询有限公司国有资产招租公告</span>
            </a>
          </li>
          <li class="t-long scrollItem">
                <a href="#" rel="noopener noreferrer" target="_blank" title="关于B平台上线试运行的通知">
                <span class="time">2025-10-14</span>
                <span class="t-long">关于B平台上线试运行的通知</span>
            </a>
          </li>
    </ul>
    
  </div>

  <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
      var speed = 3000;
      const scrollWrap = document.getElementById('scroll-warp');
      const container = document.getElementById('svertical-container');
      const items = container.querySelectorAll('.scrollItem');
      const itemHeight = items[0]?.offsetHeight || 40; // 获取实际高度
      var MyScroll = ""

      // 自动滚动函数
      function autoScroll() {
        // 获取当前第一个 li
        const firstItem = container.firstElementChild;
        if (!firstItem) return;

        // 克隆第一个 li（可选：用于无缝循环，但这里直接移动更简单）
        container.style.transition = 'transform 0.5s ease-in-out';
        // -向下滚动  +向上滚动
        container.style.transform = "translateY(-"+itemHeight+"px)";

        // 动画结束后，把第一个 li 移到最后，并重置位置
        setTimeout(() => {
          container.appendChild(firstItem);
          container.style.transition = 'none';
          container.style.transform = 'translateY(0)';
        }, 500); // 与 CSS transition 时间一致
      }

       // 如果少于2条，没必要滚动
      if (items.length > 1) {
        // 每3秒滚动一次
        MyScroll = setInterval(autoScroll, speed);
      }

      scrollWrap.onmouseover = function(){
        clearInterval(MyScroll);
      }; 
      
      scrollWrap.onmouseout = function(){
        MyScroll = setInterval(autoScroll, speed);
      }; 
    });
  </script>
</body>

</html>

可以直接复制代码测试看效果

posted @ 2025-12-08 18:41  星期7  阅读(8)  评论(0)    收藏  举报