【实例名称】
JS代码实现状态栏中文字从中间分开显示
【实例描述】
状态栏的文字特效有很多,本例学习如何将文本由中间向两边展开并滚动显示。
【实例代码】
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页-本站(www.xue51.com)</title> <SCRIPT LANGUAGE="JavaScript"> var phrase = "伦敦奥运会,欢迎各路英雄和志愿者!!期待您的参与! "; //要显示的信息 var lenPhrase = phrase.length; //信息的长度 var phraseOut = ""; var pause = 100; //间隔时间 var i=0; var j=0; function statusTxt() { i++; phraseOut = ""; for (j=1; j<=(lenPhrase/2)-i; j++) { //添加一半内容的空格 phraseOut += " "; } for (j=1; j<=i; j++) { phraseOut += phrase.charAt(j-1); //开始从中间往左显示文本 } for (j=i; j>=1; j--) { phraseOut += phrase.charAt(lenPhrase-j);//开始从中间往右显示文本 }
window.status = phraseOut; //在状态栏中输出 if (i<lenPhrase/2) { //还没到一半的时候,循环执行。 setTimeout("statusTxt()",pause); } } </SCRIPT> </head> <body bgcolor="#fff4d9" OnLoad="statusTxt()"> </body> </html>
【运行效果】
【难点剖析】
本例的重点是获取中间位置。通过“lenPhrase/2”获取文本信息的中间位置.然后使用“charAt(j-1)”获取文本信息的一个字符,从中间位置逐个显示文本:“charAt”方法是JavaScript中字符串对象的常用操作,表示从指定位置获取一个字符。
【源码下载】
如果你不愿复制代码及提高代码准确性,你可以点击:JS代码实现状态栏中文字从中间分开显示 进行本实例源码下载
……