文本特效-滚动文本

[内容提要]　本实例演示如何在网页上输出一个切割后的滚动文本。向网页上添加一个DIV层，将DIV图层的id设置为ticktext，并且在图层中显示文本“落花已作风前舞，又送黄昏雨。”：DIVid="ticktext"style="position:absolute;font-famil...

作者: 优内科技来源: 优内科技驻站日期:2008/11/12 【加入收藏】【打印此页】【关闭】

本实例演示如何在网页上输出一个切割后的滚动文本。

向网页上添加一个DIV层，将DIV图层的id设置为ticktext，并且在图层中显示文本“落花已作风前舞，又送黄昏雨。”：

<DIV id="ticktext"

style="position:absolute;

font-family:arial;font-size:30pt;visibility:hidden;">

<NOBR>落花已作风前舞，又送黄昏雨。</NOBR>

</DIV>

设计完成的网页如图1-13所示。

图1-13 设计完成的网页

在</HEAD>标记前添加函数tickinit：

function tickinit()

{

ticktext.style.posTop = top;

right = left + width;

pos = right;

setInterval('tick()', 10);

}

在tickinit函数中首先设置了DIV图层的位置，并且通过setInterval('tick()', 10)语句每隔10毫秒就会执行一次tick函数。tick函数的代码如下：

function tick()

{

pos = pos - 0.5;

if (pos < left - right)

pos = right;

var cl = left - pos;

var cr = right - pos;

ticktext.style.posLeft = pos;

ticktext.style.posTop = top;

ticktext.style.clip = "rect(auto "+cr+" px auto "+cl+" px)";

if (first)

ticktext.style.visility = "visible";

first = false;

}

在tick函数中，通过ticktext.style.posLeft = pos和ticktext.style.posTop = top语句设置DIV图层的位置，通过ticktext.style.clip = "rect(auto "+cr+" px auto "+cl+" px)"语句设置了DIV图层的切割区域。

修改<BODY>标记为<BODY bgcolor="#fef4d9" OnLoad="tickinit()">，这样每次进入页面就会执行tickinit函数。