本文介绍了三种使用JavaScript实现滚动字幕效果的方法，旨在替代已逐渐淘汰的Marquee标签。方案一参考网易游戏实现基础滚动并兼顾无脚本环境；方案二由风动人提供，支持自动宽度计算以解决内容截断问题；方案三由cityvoice提供，代码精简。文章提供了各方案的代码片段及适用场景分析。
背景与概述
随着HTML中marquee标签的使用频率日益降低，目前实现滚动效果的主流方式已转向JavaScript。对于尚不清楚为何不再直接使用marquee标签的开发者，建议先阅读相关背景文章以了解原因。
方案一：模拟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（禁用脚本）环境下的内容可用性。建议在页面中以下列HTML形式呈现内容，以确保在无脚本环境下用户仍能查看列表：
代码如下:
<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
<!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需再刷新一下页面才能执行]
该方案短小精悍，如果你偏好简洁的代码实现，这是一个值得考虑的选择。