Javascript跑马灯效果浅析

摘 要：本文主要介绍了Javascript中跑马灯的实现机制，并以此为基础详细介绍了标题跑马灯、状态栏跑马灯、文档跑马灯的实现过程。

关键词：跑马灯 Javascript 函数

中图分类号：TP3 文献标识码：A 文章编号：1672-3791（2012）12（b）-0022-01

1 简介

Javascript是Web页面中的一种脚本编程语言，也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的脚本语言。直接嵌入到HTML中，即可得到动态效果，比如，跑马灯效果就是利用Javascript代码实现文字或图片的无间断滚动。本文详细介绍了跑马灯的实现机制，以及各种跑马灯效果的实现过程。

2 跑马灯的实现机制

跑马灯，是流传在宁波一带的民间表演形式。这里的跑马灯指在电脑上通过编程实现的一种效果，通常指有时需要用一矩形条显示少量用户特别关心的信息，这条信息串首尾相连，向一个方向循环滚动。

Javascript跑马灯的实现机制非常简单，主要通过以下三步就可以完成。

（1）要获取跑马灯内容（文本或图片），例如msg=“跑马灯文字的测试！”。

（2）通过函数实现msg文字的环形连接msg=msg.substr（1，msg.length-1）+msg.substring（0，1），实现无间断滚动。

（3）设置跑马灯的位置。

（4）设置setInterval（“函数”，500），实现刷新，setInterval（）方法可按照指定的周期（以毫秒计）来调用函数，由此可以实现滚动效果。

综上所述，跑马灯的实现代码为：

msg="跑马灯文字的测试！”；//设置跑马灯内容

function showText（）{//编写函数

msg=msg.substr（1，msg.length-1）+msg.substring（0，1）；//设置跑马灯内容的首尾连接

//此处设置跑马灯的位置

}

setInterval（"showText（）"，500）；//设置定时器，500ms调用一次函数

将上述代码嵌入到标签之间，然后在标签中加入属性onload=”showText（）”，即可得到Javascript跑马灯效果。

3 文字跑马灯实现

跑马灯根据实现位置的不同可分为标题栏跑马灯、状态栏跑马灯、文档跑马灯，下面就具体介绍以上三种跑马灯效果的实现。

（1）标题栏跑马灯。

标题栏跑马灯，即实现页面标题内容的无间断滚动。具体实现代码为：

script language="javascript">

msg=document.title；//获取页面标题

function showText（）{

msg=msg.substr（1，msg.length-1）+msg.substring（0，1）；

document.title=msg；//设置页面标题

}

setInterval（"showText（）"，500）；

（2）状态栏跑马灯。

状态栏跑马灯，即在windows状态栏上实现文字的不间断滚动效果，实现代码为：

msg=“跑马灯文字的测试！”；

function showText（）{

msg=msg.substr（1，msg.length-1）+msg.substring（0，1）；

window.status=msg；//将跑马灯效果设置在状态栏

}

setInterval（"showText（）"，500）；

（3）文档跑马灯。

文档跑马灯，即在文档的任意位置显示跑马灯效果。实现这一效果，最重要的就是如何获取实现跑马灯的文档位置。我们可以借助标签，以及DOM对象来解决这个问题。具体实现步骤如下。

①在文档中定义跑马灯区域：