基于CSS和JavaScript的网页滚动字幕

张红琴， 陈焕英

（河南质量工程职业学院现代教育技术研究中心，河南平顶山 467000）

0 引 言

随着互联网的快速发展，网络成为信息传播的主要渠道。文字是网页必不可少的元素，而滚动字幕一直都广泛应用在网页上，可以使网页中的文字变得更生动活泼，在浏览时它特别醒目，经常用它来发布一些站点的通知或提示信息。滚动字幕的使用使得整个网页更有动感，显得很有生气，而且还会使网页节省出许多空间。现在的网站中也越来越多地使用滚动字幕来加强网页的互动性。许多网站用这种形式来显示动态新闻内容，更加吸引浏览者。

CSS（Cascading Style Sheets，层叠样式表单）是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言［1－2］，是由W3C提出的网页制作标准，现已获得绝大多数浏览器的支持，成为网页设计必不可少的工具之一。JavaScript是一种脚本编程语言，其功能十分强大，可用于检测网页中的各种事件，并作出相应的反应，可以很轻松地动态改变网页的CSS样式以及结构，甚至页面显示内容。这使页面灵活性大大增加，可以使用户动态决定页面的外观和内容［3］。通常意义上认为CSS是静态的样式设定，而JavaScript则是动态地实现各种功能。通过JavaScript与CSS的配合，可以制作很多奇妙而实用的效果［4］。

用HTML自带的标签＜marquee＞可以很容易实现滚动字幕的制作，不是很复杂，可是滚动不平滑、抖动，看不清，而且每滚动一幕之后就会出现一次空白，不能实现首尾连接。滚动字幕也可以用flash来实现。文中主要是用CSS，HTML和JavaScript来设计和实现水平方向向左的滚动字幕，它可以使滚动字幕平滑、首尾相连。每滚动一幕之后，不会出现一次空白。

1 基本理论

1.1 HTML与CSS

HTML（Hyper Text Markup Language，超文本标记语言）和CSS是制作网页的两个核心技术。HTML提供网页的结构，CSS提供网页的布局［5］。CSS样式表指的是一些规则，这些规则将样式化属性和值与文档中的结构化元素联系到一起，从而表达如何呈现文档［6］。网页包含内容和表现形式这两个因素。内容是指网页实际要传递的信息，包括文本、图片等。表现形式是指内容呈现的样式，例如字体、文本颜色、布局等，所有用于改变内容外观的部分，都称之为“表现形式”。通过使用CSS，可以将一个HTML文件的内容与有关它的表现形式或风格的信息分离开来［7］。

使用CSS还有如下的优势：可以使网页的表现非常统一，并且容易修改；可以支持多种设备；可以减少网页的代码量，加快下载显示的速度；作者和读者可以自己决定文件的显示；文件的结构更加灵活［8－10］。

HTML与CSS是两个作用不同的语言，它们同时对一个网页产生作用，因此，必须通过一些方法将CSS与HTML挂接在一起，这样才能正常工作［11］。

引入CSS可以采用以下3种方式：

1）外部样式表：分导入式和链接式，目的都是将一个独立的CSS文件引入HTML文件。假如将一个文件c1．css引入到HTML文件中，可以有以下方式：

链接式：

＜link href＝"c1．css"rel＝"stylesheet"type＝"text／css"／＞

导入式：

＜style type＝"text／css"＞

＠import"c1．css"；

＜／style＞

2）内部样式表（位于＜head＞标签内部）：将对页面中各种元素的样式设置集中写在＜head＞和＜／head＞之间，对于单一的网页，这种方式很方便。但是对一个包含很多页面的网站，如果每个页面都以内嵌方式设置各自的样式，就失去了CSS带来的巨大优点。

例如：

＜style type＝"text／css"＞

p｛color：red；｝

＜／style＞

3）内联样式（在HTML元素内部）：即在标记的style属性中设定CSS属性，这种方式本质上没有体现出CSS优势，因此不推荐使用。

例如：

＜p style＝"color：red；"＞内容＜／p＞

1.2 JavaScript

JavaScript是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行，比方说Internet Explorer，Mozilla，Firefox，Netscape和Opera。

JavaScript被设计用来向HTML页面添加交互行为，是一种脚本语言。通常被直接嵌入HTML页面。JavaScript是一种解释性语言（就是说，代码执行不进行预编译）。在HTML文件中有3种方式［12］加载JavaScript，可以位于head部分、body部分和使用外部JavaScript，这些方式与HTML中加载CSS很相似。

通过JavaScript可以重构整个HTML文档，可以添加、移除、改变或重排页面上的项目。

要改变页面的某个东西，JavaScript就需要获得对HTML文档中所有元素进行访问的入口。这个入口，连同对HTML元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型（DOM）来获得的。用JavaScript对网页进行的所有操作都是通过DOM进行的。

1.3 DOM

DOM（Document Object Model）被称作文档对象模型，它是语言和平台中立的接口，允许程序和脚本动态访问和更新文档的内容、结构和风格。

DOM是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。DOM把网页和脚本以及其它的编程语言联系了起来。可以通过文档对象的属性、方法和事件来掌控、操纵和创建动态的网页元素，每一个网页元素（一个HTML标签）都对应着一个对象（object）。HTML文档对象模型定义了访问和处理HTML文档的标准方法，HTML文档中的每个成分都是一个节点。

1．3．1 DOM中的getElementById（）方法

getElementById（）是DOM Document对象中的一个重要的方法，用于查找文档中的一个特定的元素，获得对文档元素对象的引用。getElementById的字面含义就是“通过ID名来获得对DOM对象某个元素的引用”，在需要对HTML文档的某个元素操作时，应当在HTML中给该元素设置一个id属性，为它指定一个（在文档中）唯一的名称，然后就可以用getElementById（）获得想要的元素。得到一个元素的引用后，javascript就可以用它对元素进行使用和修改。用这个方法基本上可以控制页面所有标签。

1．3．2 DOM中的setInterval和clearInterval方法

DOM中的setInterval方法常用来在网页中实现动画，也是网页动画的核心。setInterval方法可以根据设置的时间，重复执行一个JavaS－cript自定义函数或已存在的对象。setInterval通常指定两个参数。第一个参数指定要执行的函数，第二个参数指定间隔时间。如果不使用clearInterval方法清除，setInterval会一直重复运行，直到你关闭浏览器。可以理解为：setInterval的作用就是根据指定的时间来重复执行指定的某段程序，从而完成一个动画的效果。

如果对计时函数不加以处理，那么setInterval将会持续执行相同的代码，一直到浏览器窗口关闭，或者用户转到了另外一个页面为止。不过还是有办法可以终止setInterval函数的执行。当setInterval调用执行完毕时，它将返回一个timer ID，将来便可以利用该值对计时器进行访问，如果将该ID传递给clearInterval，就可以终止被调用的代码的执行了。

1．3．2．1 setInterval（）定义和用法

setInterval（）方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval（）方法会不停地调用函数，直到clearInterval（）被调用或窗口被关闭。由setInterval（）返回的ID值可用作clearInterval（）方法的参数。

语法：setInterval（code，millisec［，"lang"］）。

参数描述：code必需，要执行的代码串或者是要调用的函数名或者是匿名函数。millisec必须，周期性执行或调用code之间的时间间隔，以毫秒计。

返回值：一个可以传递给Window．clear－Interval（），从而取消对code的周期性执行的值。每次调用setInterval函数都会产生一个唯一的ID，可以通过clearInterval函数（此函数的参数接收一个setInterval返回的ID）暂停setInterval函数。

1．3．2．2 clearInterval（）定义和用法

clearInterval（）方法可取消由setInterval（）设置的timeout。

clearInterval（）方法的参数必须是由setInterval（）返回的ID值。该方法仅接收一个参数。

语法：clearInterval（id＿of＿setinterval）

参数描述：id＿of＿setinterval是由setInterval（）返回的ID值。

2 设 计

设定一个固定宽度并且隐藏超出它宽度的内容的外容器wrap，里面再放置一个内容器content用于存放滚动内容（包括复制的内容），text2为text1的复制内容，通过用JavaScript代码不断改变外容器wrap的向左滚动的宽度scrollLeft达到滚动的目的，当滚动至text1与text2的交界处时直接跳回初始位置，因为text1与text2一样，所以分不出跳动的瞬间，滚动到了一个和当前画面一样的位置，结果我们看到的就是连续的滚动了，从而达到“无缝”滚动的目的。

3 实 现

3.1 所用软件

可以用Dreamweaver或Visual Studio进行编辑，也可以用记事本等工具编写。在Dreamweaver中，无论是CSS代码还是HTML代码，都有很好的语法提示。在编写具体CSS代码时，按空格键或者回车键都可以触发语法提示，按空格键直接显示语法提示，按回车键时换行并且显示语法提示。语法提示可以显示出属性，进行选择，当光标定位到某个属性上后，按回车键，可以选择该属性，并且同时显示出供选择的属性值，再从中进行选择。但是用Dreamweaver编写JavaScript代码时，并不会有语法提示、自动完成功能等方便快捷之处，只有语法高亮。用Visual Studio编写CSS时也有很好的语法提示，和用Dreamweaver有所不同，当用到的开始标签输入结束后，会自动加上结束标签。另外编写JavaS－cript时，会有很好的语法提示。

3.2 代码部分

用HTML设置页面元素，确定页面中的内容；用CSS设置元素的CSS属性，对其进行定位并设置其是否可见；再用JavaScript编写函数，实现当鼠标移到字幕上时，停止，移出时，继续。

程序中所用的完整代码和部分注释如下：

3.3 运行结果

把上述代码也可以包括其中的注释部分全部复制到一个网页文件中，打开网页就可以看到如图1所示的向左滚动字幕，并且平滑、首尾相连。当鼠标指针移至滚动字幕上时，就停止滚动。当鼠标指针移出滚动字幕时，又继续开始滚动。

图1 滚动字幕

3.4 分析讨论

上述代码由3部分组成：HTML，CSS和JavaScript。

HTML和CSS部分用于确定网页中的内容和外观。wrap为外部容器，content为内部容器，text1和text2的内容和样式完全相同。text1为滚动文字内容，text2为滚动文字内容的复制内容，其中content的宽度定义非常重要，必须符合下面两个条件：

1）content的宽度－text1的宽度≥wrap的宽度。也就是内部容器content的宽度不仅要大于外部容器wrap的宽度，而且还要大于或等于wrap和text1的宽度的总和。这个可以理解为如果内部容器内容没有超过外部容器的宽度，不需要横向的滚动就可以看到所有横向的范围，那么在JavaScript中使用scrollLeft的时候肯定是无效的了，这时文字内容是一点也不会滚动。另外，如果内部容器超过外容器的宽度，但是宽度不够宽，那么在滚动的过程中只是滚动一会儿就停下了，也就是当滚动到内部容器的右边界（包括border边框）和外部容器的最右边界（不包括border边框）重合时，就停止不再滚动了。所以要保证滚动字幕一直滚动，内部容器宽度至少是外部容器和滚动内容的宽度总和。另外，还要符合下面的要求。

2）content的宽度至少是text1宽度的两倍，否则text2和text1的内容不能在同一行上，也不能实现最终的效果。

另外，text1的宽度一般要大于wrap的宽度，此时只用复制一次text1的内容到text2中即可。文中的3．2代码设计中就只复制了一次，因为text1文本内容的宽度是大于外容器wrap的宽度。但是，如果text1的宽度小于wrap的宽度，为了滚动能够“连续”，需要将字幕的内容复制多遍，否则会出现滚动时首尾不连接的现象，原因是text2是连接text1，但text2右边有空白区域（因为content的宽度要符合上述的两个条件，而若text1的宽度小于wrap的宽度时，text1和text2的总宽度就一定会小于content的宽度，所以右边就会出现空白区域）。至于字幕的内容需要复制多少遍，应根据具体字幕内容的多少来确定。

只用CSS和HTML代码，这时看到的是静止的内容，文字并不会滚动。如果要想使文字有动态的效果，能够滚动，可以使用javascript来实现。

javascript代码部分主要用来实现滚动字幕的滚动和暂停。嵌入到HTML中的javascript代码需要以＜script type＝“text／javascript”＞开始，以＜／script＞结束。代码中用到的方法、属性和事件介绍如下：

getElementById（）方法、setInterval（）方法和clearInterval（）方法在前面已介绍。

innerHTML属性：设置或获取位于对象起始和结束标签内的HTML。

scrollLeft属性：对象的滚动宽度。

offsetWidth属性：表示对象实际宽度。

onmouseover事件：鼠标指针移动到指定的对象上时事件发生，执行相应的代码或函数。用来设置鼠标移入区域时继续滚动。

onmouseout事件：鼠标指针移出指定的对象时发生。用来设置鼠标移出区域时继续滚动。

代码中用到的setInterval和clearInterval方法是window对象的方法，但由于window对象位于浏览器对象模型层次结构的顶端，所以在引用window对象的属性或者方法时并不需要使用window对象名。因此，也可以将window．setInterval（）和window．clearInterval（）简写为setInterval（）和clearInterval（）。

在代码中两次用到d＝window．setInterval（roll，speed），如下所示：

第一次是单独使用，如果没有这一句，当打开网页时，字幕不会滚动。另一次是在onmouseout事件触发的函数内部使用，如果没有这一句，当鼠标指针从字幕上移出时，字幕就不再滚动；这两次缺一不可。

javascript代码中的自定义函数roll是核心，如下所示：

function roll（）

上面的w．scrollLeft＋＝1语句中，w代表id为wrap的元素，w．scrollLeft表示元素wrap内的内容向左滚动的距离，w．scrollLeft＋＝1表示wrap内的内容向左滚动的距离在原来的基础上再加1像素。语句if（w．scrollLeft－t2．offset－Width＝＝0）w．scrollLeft＝0表示如果wrap内的内容向左滚动的距离等于text2（这里t2代表id为text2的元素）的宽度时，wrap向左滚动的距离又从0开始，由于text1和text2完全一样，所以就看不出跳动的瞬间。roll函数通过语句window．setInterval（roll，speed）来调用，在一定的时间间隔调用函数roll一次，speed为时间间隔，speed值越小，滚动越快。

4 结 语

用HTML＋CSS＋JavaScript设计和实现了向左滚动的字幕，可以实现平滑、连续、无缝的效果，每滚动一幕之后，不会出现一次空白。当鼠标移至滚动字幕上时停止滚动；当鼠标移出字幕时，继续滚动，可广泛用在网页设计中。文中滚动的内容没有加超链接，需要时可以加上标签＜a＞来实现。另外要注意，当滚动内容宽度大于显示容器的宽度时，只用复制一次滚动内容即可，但是当滚动内容宽度小于显示容器的宽度时，需要复制多次滚动内容。同理也可实现向右滚动的字幕。向下或向上的垂直方向的滚动字幕实现原理与其相似，实际上比水平方向的滚动字幕要简单一些。另外，滚动图片的实现原理和其相似。

［1］ 郑俊生，姜敏．使用DIV＋CSS进行网页设计应用研究［J］．电脑开发与应用，2008，21（9）：60－63．

［2］ 宣丰敏．毕业生就业信息管理系统的设计和实现［D］：［硕士学位论文］．上海：华东师范大学软件学院，2010：7－8．

［3］ 叶青．HTML＋CSS＋JavaScript实用详解［M］．北京：电子工业出版社，2008：234－235．

［4］ 曾顺．精通CSS＋DIV网页样式与布局［M］．北京：人民邮电出版社，2007：314－315．

［5］ W3C．HTML ＆CSS［EB／OL］．（2012－02－03）［2012－02－12］．http：／／www．w3．org／standards／webdesign／htmlcss．

［6］ Hkon Wium Lie．Cascading Style Sheets Norway：University of Oslo［ED／OL］．（2012－02－05）［2012－02－12］．http：／／people．opera．com／howcome／2006／phd．

［7］ 张俊兰，刘翼，铁宏军．基于CSS技术的网页设计应用研究［J］．延安大学学报：自然科学版，2010，29（3）：34－39．

［8］ Wikipedia．Cascading Style Sheets［EB／OL］．（2012－02－05）［2012－02－12］．http：／／en．wikipedia．org／wiki／Css．

［9］ Andy Budd，Simon Collison，Cameron Moll．精通CSS：高级Web标准解决方案［M］．陈剑瓯，译．2版．北京：人民邮电出版社，2010：3－5．

［10］ 罗威，陈伟．基于模板和CSS技术的Web页面定制［J］．计算机应用研究，2008，25（7）：2100－2103．

［11］ 温谦．CSS设计彻底研究［M］．北京：人民邮电出版社，2008：7－8．

［12］ W3School．把JavaScript放置到何处［EB／OL］．（2012－02－05）［2012－02－12］．http：／／www．w3school．com．cn／js／js＿whereto．asp．