中华网通行证
用户名 密码
  科技动态 硬件广场 下载基地 网络教室 网络冲浪 科学博览 移动时代 手机上网 桌面壁纸 科技商情  

Javascript的推出文字效果
 冯永曜  黄山村夫

 一段文字由页面里逐渐向外推出,在推出的过程中,颜色也在不断地变化,速度逐渐加快,而在最后又稍作停顿,产生一种动画效果,但它不是动画,是用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、定时器函数的定时时间也可以动态控制,从而可以用制作更多的特效,如:一个运动的图片可以使它时快时慢等等。


 赛迪网 


 

更多本栏目内容
??Windows 2000系统安全设置攻略
??Dreamweaver编写CSS需要掌握的技巧
??使用Flash MX过程中的3个小技巧
??拖IE9网站图标到Win7任务栏 精彩好礼任你拿
??从此不再耗流量?Google离线地图试用
??给瑞星添加移动存储自动杀毒功能
??一周壁纸榜单 靓丽风景伴您欢度周末
??金山网络七款软件齐升级 炫丽界面贺新春
??提升网站流量和权重 百度热榜排第一
预警:电商促销引钓鱼 七夕网购需谨慎

本站检索



中华网推荐

·国家级治脑病新药思维源
·中藏药治疗脑病新突破
·治类风湿,强直性脊柱炎
·养肾·痛风·长寿
·肝病泌尿脑萎缩新药介绍
·强直性脊柱炎康复乐园
·让中医辩证不孕不育
·国医治股骨头坏死一绝
·乙肝为何久治不愈?
·二千元垄断批发做老板
·中医中药专治前列腺
·治牛皮癣白癜风已成现实
·专治痛风病的白衣天使
·不孕不育的杏林奇葩
·专卖店零售管理系统





   

网络教室编辑信箱