软件学堂

网游分类软件分类

JS代码实现状态栏中文字从中间分开显示

2012-10-27 来源:网络

【实例名称】

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代码实现状态栏中文字从中间分开显示 进行本实例源码下载 

上一篇:JS代码实现状态栏文字从右弹出
下一篇:JS代码实现屏蔽掉IE自带的功能键

相关文章