JavaScript实例教程(十五)状态栏文字拉长的效果

2016-02-19 14:41 11 1 收藏

只要你有一台电脑或者手机,都能关注图老师为大家精心推荐的JavaScript实例教程(十五)状态栏文字拉长的效果,手机电脑控们准备好了吗?一起看过来吧!

【 tulaoshi.com - Web开发 】

本例实现的效果是状态栏的文字由右向左,风一样的飘过来,当都飘到右边的时候,不停的循环前一次的效果,给人耳目一新的感觉呢。

下面是源代码:

SCRIPT LANGUAGE="JavaScript"

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

timeID = 5;
stcnt = 11;
msg = "欢迎光临5D多媒体";
//你希望状态栏出现的文字,可以自由改动哟!
wmsg = new Array(33);
wmsg[0] = msg;
blnk = " ";
for (i = 1; i 32; i++) {
b = blnk.substring(0, i);
wmsg[i] = "";
for (j = 0; j msg.length; j++) wmsg[i] = wmsg[i] + msg.charAt(j) + b;
}
//以上的循环语句的作用是定义一个由空格组成的变量blnk,分别赋予wmsg[1]到wmsg[31]不同间隔的空格与字符的组合
function wiper() {
if (stcnt -1) str = wmsg[stcnt];
else str = wmsg[0];
if (stcnt-- -40) stcnt = 31;
status = str;
clearTimeout(timeID);
timeID = setTimeout("wiper()", 150);
}
//以上的函数的作用是写出文字,并间隔150mm变换一次字间句距,然后等待后重新写。

/script

在head和/head标签之间输入以上代码

把body改为BODY OnLoad="wiper()"

就是载入函数wiper()

以下是上述代码的运行结果:

JavaScript实例教程(十五)状态栏文字拉长的效果

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

JavaScript实例教程(十五)状态栏文字拉长的效果

例中的关键部分还是在于wiper()这个函数,希望大家对于这段函数代码多多揣摩研究,一定会有不小的收获的,如果不太清楚函数的用法,请参考以前所讲的和相关资料。

来源:http://www.tulaoshi.com/n/20160219/1607560.html

延伸阅读
标签: 办公软件
    相信打开查找和替换对话框来查找和替换文档中的文字、录制宏、执行修订文档等功能大家平时使用得一定挺多的,但大家一般都是通过选择菜单下的命令来打开并执行这些功能的。不过您知道吗?利用Word 2000的状态栏我们可以快速执行上述操作。     1、快速打开“查找和替换”对话框   &nbs...
标签: flash教程
本例制作从左到右扫描文字的效果。文字从左到右移动并扫描背景文字,如图5-1所示。文字扫描特效是一种比较好的文字效果,可以应用在网站动画及广告图标中。本例主要应用到Flash MX中的“文本工具”按钮、图像元件属性、移动变形动画的制作技巧以及图层的使用等。 创作步骤: 第1步,启动Flash MX,按快捷键“Ctrl+J”,打开“文...
标签: Web开发
本JavaScript实例教程的推出希望对JavaScript的爱好者在学习JavaScript上能带来点帮助,也希望对初学者在学习JavaScript时,能找到一条入门捷径,本教程通过对JavaScript实例分析学习,能使学习者更容易的了解且掌握JavaScript语言。不多说了!我们的旅途就从这里开始吧!:) JavaScript简介 JavaScript是一种基于对象的脚本语言。使用它可以...
标签: Web开发
状态栏 "文档"窗口底部的状态栏提供与您正创建的文档有关的其它信息。 标签选择器显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。单击 可以选择文档的整个正文。若要设置标签选择器中某个标签的 class 或 id 属性,请右键单击 (Windows) 或按住 Control 键并单击 (Macintos...
C++ Q&A 专栏... 原著:Paul DiLascia 翻译:lowiq 原文出处:MSDN Magazine December 2001(C++ Q&A) 原代码下载:CQA0112.exe (52KB) 停止屏幕保护 侦测屏幕的分辨率 ...

经验教程

943

收藏

70
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部