2012-10-27 来源:网络
【实例名称】
JS代码实现状态栏文字从右弹出
【实例描述】
状态栏的文字可以从不同方向弹出,实现不同的样式。本例实现从右边弹出文字的效果。
【实例代码】
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页-学无忧(www.xue51.com)</title> <script language="JavaScript"> var MESSAGE="支持伦敦奥运会,支持上海世博会 "; //状态栏显示的文本 //弹出文本的主要方法 function snapIn(jumpSpaces,position) { var msg = MESSAGE; var out = ""; //循环读取文本信息 for (var i=0; i<position; i++) {out += msg.charAt(i);} //生成100个空格 for (i=1;i<jumpSpaces;i++) {out += " ";} //依次读取文本信息 out += msg.charAt(position); //在状态栏显示文本信息 window.status = out; //实现从右边弹出文本的方法 if (jumpSpaces <= 1) { position++; if (msg.charAt(position) == ' ') {position++; } jumpSpaces = 100-position; } else if (jumpSpaces > 3) {jumpSpaces *= .75;} else {jumpSpaces--;} if (position != msg.length) { var cmd = "snapIn(" + jumpSpaces + "," + position + ")"; scrollID = window.setTimeout(cmd,scroll.delay); //根据定时器,循环弹出文本 } else { window.status=""; jumpSpaces=0; position=0; cmd = "snapIn(" + jumpSpaces + "," + position + ")"; scrollID = window.setTimeout(cmd,scroll.delay); return false; } return true; } snapIn(100,0); </script> </head> <body> </body> </html>
【运行效果】
【难点剖析】
本例的重点是状态栏的文字显示。IE中的状态栏使用window对象的“status’’属性:从右边弹出文字主要是依靠位置的变化,使用“100一position”的方法从右边往左边显示文字。
【源码下载】
如果你不愿复制代码及提高代码准确性,你可以点击:JS代码实现状态栏文字从右弹出 进行本实例源码下载