任务2-5 循环字幕

需求:

用DIV实现循环字幕。

分析:

用两个重叠的DIV,上层的宽度在变化,下层的宽度不变,上下层的文本颜色不同,字体相同,使用定时事件改变上层的宽度,从而产生循环字幕效果。

实现:

第一步,新建文件夹05,并在05文件夹中新建一个页面,添加三个DIV。第一个DIV用于整个字幕的定位,另外两个分别是上层DIV和下层DIV,它们的样式属性设置如清单2-12所示。

清单2-12 字幕上下两个DIV层的定义

第二步,编写定时处理事件,代码如清单2-13所示。

清单2-13 字幕定时事件客户端编码

说明

为了让字幕不停地循环,将语句setTimeout("LED()",100)放在分支之外。

如果要在windows的状态栏显示滚动字幕,则在定时事件代码中设置window.status即可。