快捷導(dǎo)航

JS實(shí)現(xiàn)來回出現(xiàn)文字的狀態(tài)欄特效代碼

更新時(shí)間：2015年10月31日 10:54:09 作者：企鵝

這篇文章主要介紹了JS實(shí)現(xiàn)來回出現(xiàn)文字的狀態(tài)欄特效代碼,針對(duì)文字的定義及狀態(tài)欄的定時(shí)顯示等實(shí)現(xiàn)方法備有詳細(xì)的文字說明,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)來回出現(xiàn)文字的狀態(tài)欄特效代碼。分享給大家供大家參考，具體如下：

運(yùn)行這款來回出現(xiàn)文字的狀態(tài)欄特效時(shí)，請(qǐng)注意頁面左下角的狀態(tài)欄。貌似IE8以上版本看不到效果唉。那么究竟是如何實(shí)現(xiàn)的呢？主要是用函數(shù)來顯示消息，根據(jù)place的值取當(dāng)前需顯示的字符串，準(zhǔn)備在300毫秒后收起顯示，將需取的字符串長(zhǎng)度計(jì)數(shù)器加一準(zhǔn)備下一次顯示；同時(shí)使用函數(shù)隱藏消息，取Message右邊的一定長(zhǎng)度的字符串，設(shè)定消隱下一個(gè)字符的延時(shí)。

運(yùn)行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/js-status-bar-scroll-show-codes/

具體代碼如下：

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var Message=" 歡迎光臨腳本之家，請(qǐng)多多提出你的建議!!! "; //這里可自定義顯示內(nèi)容
var place=1;
function scrollIn() { //這個(gè)函數(shù)用來顯示消息
window.status=Message.substring(0, place); //根據(jù)place的值取當(dāng)前需顯示的字符串
if (place >= Message.length) { //如果全部信息已經(jīng)顯示完畢
place=1; //則將place重置
window.setTimeout("scrollOut()",300); //準(zhǔn)備在300毫秒后收起顯示
} else { //否則(信息還沒有顯示完)
place++; //將需取的字符串長(zhǎng)度計(jì)數(shù)器加一
window.setTimeout("scrollIn()",50); //準(zhǔn)備下一次顯示
  } 
}
function scrollOut() { //這個(gè)函數(shù)用來消隱消息
window.status=Message.substring(place, Message.length); //取Message右邊的一定長(zhǎng)度的字符串
if (place >= Message.length) { //如果已經(jīng)無字符可取(信息已經(jīng)完全消隱)
place=1; //則初始化place
window.setTimeout("scrollIn()", 100); //設(shè)定下一次操作是顯示信息
} else { //否則(信息還沒有消隱完畢)
place++; //計(jì)數(shù)器加一
window.setTimeout("scrollOut()", 50); //設(shè)定消隱下一個(gè)字符的延時(shí)
  }
}
// End -->
</SCRIPT>
<title>來回出現(xiàn)文字的狀態(tài)欄特效</title>
</head>
<body onLoad="scrollIn()">
<b>請(qǐng)注意頁面左下角的狀態(tài)欄</b>
</body>

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: