一段文字由页面里逐渐向外推出,在推出的过程中,颜色也在不断地变化,速度逐渐加快,而在最后又稍作停顿,产生一种动画效果,但它不是动画,是用Javascript制作的一种动态文字效果。它实际上是用不断地将文字从小到大改变来模拟出文字由远及近的推出效果的。下页是效果图:
图1 变化过程图
图2 变化过程图
这种效果还不错吧?想做一个吗?请看制作方法:
1、插入一个1*1的表格,输入文字,并用<span>把它括起来,再给它取个名字。为了使效果更好一点,在本例中还加载了一个CSS的“shadow”滤镜,使文字产生阴影的效果。本例文字部分的源代码如下:
<table width="60%" border="0" height="70">
<tr>
<td class="shadow1">
<div align="center"><span id="a1" style="font-weight:bold">黄山村夫站</span><br>
<span id="a2" >http://fym888.go.163.com</span></div>
</td>
</tr>
</table>
2、在<head>与</head>之间加入下面这段程序,源代码如下:
<script languae="JavaScript">
<!--
var i=0;
ns4=(document.layers)?true:false;
ie4=(document.all)?true:false;
function movetext(){
if (ie4) {
if (i>8)i=1;else i++;
document.all.a1.style.fontSize=i*4;
document.all.a1.style.lineHeight=1.2;
document.all.a2.style.fontSize=i*2;
document.all.a2.style.lineHeight=1.2;
c1=i*28;
document.all.a1.style.color="rgb("+c1+","+0+","+0+")";
if (i<9) t1=setTimeout("movetext()",1000/(i*0.5));
else t1=setTimeout("movetext()",2000);
}
if (ns4) {
if (i>8)i=1;else i++;
document.a1.fontSize=i*4;
document.a1.lineHeight=1.2;
document.a2.fontSize=i*2;
document.a2.lineHeight=1.2;
c1=i*28;
document.a1.color="rgb("+c1+","+0+","+0+")";
if (i<9) t1=setTimeout("movetext()",1000/(i*0.5));
else t1=setTimeout("movetext()",2000);
}}
-->
</script>
这个程序由于考虑了适应IE和NS两种浏览器,所以程序代码增加了不少。在本例中是通过不同的浏览器支持不同的对象来检测浏览器的。如:IE浏览器支持document.all而不支持document.layers,所以如果浏览器支持document.all那么它就是IE系列的浏览器(当然版本必须在3.0以上),反之亦然。
程序的主体部分是改变文本的属性,方法比较简单,但要注意:在有多行文本时,对象的名称不要搞乱了。程序中设置了一个记数器(“i”),当定时函数每刷新一次,记数器加1,而文字大小、颜色等属性值又是通过与计数器值(“i”)的运算得出的,所以在刷新时将会发生改变,当然不能无限制地大下去,否则很快就一个页面也放不下一个字了,在本例中计数器最大计数是“8”,一旦达到就使它回归到“1”,从而使文字从小变到大,达到一定时候,就又从头开始,就是这条语句“if
(i>8)i=1;else i++;”所起的作用。
为了使文字在变化过程中产生一种由慢变快的效果,从而使由远及近的效果更明显一些,对定时器的时间值也进行了动态设置,这条语句“if
(i<9) t1=setTimeout("movetext()",1000/(i*0.5));”就是起这种作用的。那么当文字变到最大时又多停留一下就是这条语句“else
t1=setTimeout("movetext()",2000);”的作用了。你若想使最大的文字停留更长时间,只要加大定时器的毫秒数就行了,本例中是2000毫秒,也就是2秒。
3、在<body>标记加上onload="movetext()"以使网页加载时就显示这种效果。
本文的例子中,有两点值得注意:
1、IE和NS虽然都支持Javascript,但在具体操作的时候还是有一些区别的,要制作一种跨平台的效果就必须考虑这种区别;
2、定时器函数的定时时间也可以动态控制,从而可以用制作更多的特效,如:一个运动的图片可以使它时快时慢等等。