HTML5代码如何制作无缝滚动 HTML5代码中marquee的替代方法

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

HTML5代码如何制作无缝滚动 HTML5代码中marquee的替代方法

2025-10-21

浏览次数：次

返回列表

答案是使用HTML、CSS和J*aScript组合替代废弃的marquee标签。通过CSS动画实现文字或图片平滑滚动，利用@keyframes定义位移；或用J*aScript动态控制元素位置，复制内容实现无缝衔接，并支持交互操作，兼容性好且更灵活。

html5代码如何制作无缝滚动 html5代码中marquee的替代方法

在HTML5中，标签已被废弃，不再推荐使用。要实现无缝滚动效果，推荐使用 HTML + CSS + J*aScript 的现代方法。下面介绍几种常见且兼容性良好的替代方案。

1. 使用CSS动画实现横向无缝滚动

通过CSS的@keyframes和transform，可以制作平滑的无缝滚动文字或图片。

示例：横向滚动新闻标题

<div class="scroll-container">
  <div class="scroll-content">
    热点新闻：HTML5替代marquee方法 | 今日科技动态 | 前端开发技巧 | 滚动不停歇
  </div>
</div>

说明：

padding-left: 100% 初始将内容推到可视区域外
动画从右向左移动-100%距离，形成循环
速度由animation-duration控制，可调快慢

2. 使用J*aScript控制滚动（更灵活）

适合需要动态内容或复杂逻辑的场景，比如图片轮播、实时数据流。

eMart 网店系统

功能列表：底层程序与前台页面分离的效果，对页面的修改无需改动任何程序代码。完善的标签系统，支持自定义标签，公用标签，快捷标签，动态标签，静态标签等等，支持标签内的vbs语法，原则上运用这些标签可以制作出任何想要的页面效果。兼容原来的栏目系统，可以很方便的插入一个栏目或者一个栏目组到页面的任何位置。底层模版解析程序具有非常高的效率，稳定性和容错性，即使模版中有错误的标签也不会影响页面的显示。所有的标

0 查看详情 eMart 网店系统

<div id="scrollArea" style="width:300px; overflow:hidden; white-space:nowrap;">
  <span id="scrollText">? 欢迎访问我的网站 - HTML5滚动教程 - 不再使用marquee </span>
</div>
<p><script>
const container = document.getElementById('scrollArea');
const text = document.getElementById('scrollText');</p><p>// 克隆内容，实现无缝衔接
text.innerHTML += text.innerHTML;</p><p>function startScroll() {
let position = 0;
const speed = 1; // 像素/帧</p><p>setInterval(() => {
position -= speed;
if (position <= -text.offsetWidth / 2) {
position = 0;
}
text.style.transform = <code>translateX(${position}px)</code>;
}, 20);
}</p><p>startScroll();
</script>

优点：

可动态添加内容
支持暂停、加速等交互控制
兼容老浏览器

3. 图片无缝滚动示例

常用于广告图或产品展示。

<div class="image-scroll" style="width:100%; overflow:hidden; height:100px;">
  <div class="image-track" style="display:flex; animation: scroll 15s linear infinite;">
    @@##@@
    @@##@@
    @@##@@
    <!-- 重复一次图片，实现无缝 -->
    @@##@@
    @@##@@
    @@##@@
  </div>
</div>
<p><style>
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); } /<em> 移动一半长度 </em>/
}
</style>

关键点：复制一组图片，当第一组移出时，第二组刚好接上，视觉上无停顿。

基本上就这些方法。用CSS动画简单高效，J*aScript控制更灵活。根据实际需求选择即可。