JavaScript实现滚动字幕：替代Marquee的三种方案与可用性优化
本文探讨使用JavaScript替代HTML Marquee标签实现滚动字幕的三种方法，重点分析第一种方案在noscript环境下的可用性优化，通过保留静态列表并隐藏展示内容，确保无脚本环境下用户仍能正常阅读。同时介绍自动宽度自适应与精简版代码方案，兼顾语义化与代码简洁性，提供完整的实现思路与注意事项。
JavaScript替代Marquee的背景与必要性
鉴于HTML中marquee标签的使用频率日益降低，目前实现滚动效果的主流方式已转向JavaScript。
弃用marquee的主要原因在于其对用户体验的负面影响。虽然将大量内容压缩为几行滚动可以节省版面空间，但用户可能需要花费大量时间等待以阅读特定行内容。以经典论坛页面上部“BlogBeta 数字引擎p4 3.0服务器只要6999元/年”广告文字右侧的聚合文字滚动为例，这种设计是否真正提升了用户体验值得商榷。W3C专家组的考量显然比部分开发者更为周全，这并非无稽之谈。
方案一：模拟Marquee及可用性优化
第一种实现方案：使用JavaScript模拟marquee的滚动行为。
代码来源：网易游戏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>热点新闻</title> <style type="text/css"> <!-- body { margin: 0px; font-size: 12px; color: #938C43; line-height: 150%; text-align:center; } a:link{color: #9D943A;font-size:12px;} a:hover{color: #FF3300;font-size:12px;} a:visited{color: #9D943A;font-size:12px;} a.red:link{color: #ff0000;font-size:12px;} a.red:hover{color: #ff0000;font-size:12px;} a.red:visited{color: #ff0000;font-size:12px;} #marqueeBox{background:#f7f7f7;border:1px solid silver;padding:1px;text-align:center;margin:0 auto;} --> </style> </head> <body> <h4>滚动新闻</h4> </body> </html> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
个人观点：从Web可用性的角度来看，在采用此段代码时，必须考虑noscript环境下的可用性。建议在页面中以下列代码形式呈现内容，以确保无脚本环境下用户仍能查看列表：
程序代码
代码如下:
<div id="newslist">
<ul>
<li><a href=http://xyq.163.com/news/2006/11/2-2-20061102170913.html target=_blank>用“梦幻密保”快速取回帐号密码</a></li>
<li><a href=http://ekey.163.com/ target=_blank>网易将军令官方网站</a></li>
<li><a href=http://xyq.163.com/download/wallpaper.htm target=_blank>最新壁纸下载</a></li>
<li><a href=http://xyq.163.com/download/around.htm target=_blank>最新屏保下载</a></li>
</ul>
</div>随后通过脚本设置隐藏该列表，并将列表项读取到JavaScript定义的数组中。这样即可在noscript环境下正常显示内容列表，达到兼容效果。
方案二：自适应宽度滚动实现
第二种方法：功能更强，能根据内容自动进行左右滚动，解决了容器宽度不足导致的文字截取问题。
原文作者：风动人
<html> <head> <title> SCROLL </title> <style type="text/css"> #infozone{font-size:12px;color:#aa6;overflow:hidden;width:100px;height:20px;} #infozone div{height:20px;line-height:20px;white-space:nowrap;overflow:hidden;} </style> </head> <body> <div id="infozone"><div>温岚 - 屋顶(周杰伦 对唱版)</div><div>范玮琪 - 那些花儿</div><div>张韶涵 - 娃娃</div><div>孙楠&韩红 - 美丽的神话</div></div> </body> </html> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
个人观点：从XHTML语义化的角度分析，页面内容中滥用div标签的现象较为严重，建议改为ul/li结构以符合语义规范。
方案三：精简代码实现
第三种方案最为精简，代码量极少。
原文作者：cityvoice
HTML代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <style type="text/css"> #newslist{ background:#f7f7f7;border:1px solid silver;padding:1px;height:20px;line-height:20px;width:300px; } #contain{ font-size:12px;overflow:hidden;list-style:none;width:300px;height:20px;margin:0px;padding:0; } #contain li{ height:20px;line-height:20px;white-space:nowrap;overflow:hidden; } </style> </HEAD> <BODY> <div id="newslist"> <ul id="contain"> <li>温岚 - 屋顶(左右摆动)</li> <li>范玮琪 - 那些花儿</li> <li>张韶涵 - 娃娃</li> <li>孙楠&韩红 - 美丽的神话</li> <li>张信哲 - 白月光</li> </ul> </div> </BODY> </HTML> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
个人观点：该方案短小精悍，若追求简洁实现，此方案值得考虑。
怎么优化 React 应用性能？避免不必要的重渲染
2026-11-05 12:43:40
怎么利用 Nuxt.js useHead 优化 SEO 与元数据管理
2026-11-05 10:37:58
JS混淆常见手段解析：字符串加密与控制流平坦化还原思路
2026-11-04 19:07:42
JavaScript能在浏览器中直接获取MAC地址吗
2026-11-03 20:34:17
JavaScript策略模式：用对象映射替代if-else分支
2026-11-03 19:46:11