当前位置：首页 > news >正文

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

news 2026/5/26 15:44:51

效果：

<!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="/cms/default/webfile/tzgg/20251014/1162768750563295232.html" rel="noopener noreferrer" target="_blank" title="重咨集团关于进一步做好疫情防控期间重咨大厦开评标交易活动的通知"><span class="time">2025-10-14</span><span class="t-long">重咨集团关于进一步做好疫情防控期间重咨大厦开评标交易活动的通知</span></a></li><li class="t-long scrollItem"><a href="#" rel="noopener noreferrer" target="_blank" title="关于有序恢复在重庆咨询大厦开标评标有关活动的通知"><span class="time">2025-10-14</span><span class="t-long">关于有序恢复在重庆咨询大厦开标评标有关活动的通知</span></a></li><li class="t-long scrollItem"><a href="#" rel="noopener noreferrer" target="_blank" title="重庆市投资咨询有限公司国有资产招租公告"><span class="time">2025-10-14</span><span class="t-long">重庆市投资咨询有限公司国有资产招租公告</span></a></li><li class="t-long scrollItem"><a href="#" rel="noopener noreferrer" target="_blank" title="关于渝e招电子采购平台上线试运行的通知"><span class="time">2025-10-14</span><span class="t-long">关于渝e招电子采购平台上线试运行的通知</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>