JS實現來回出現文字的狀態欄特效代碼
編輯：關於JavaScript
本文實例講述了JS實現來回出現文字的狀態欄特效代碼。分享給大家供大家參考，具體如下：
運行這款來回出現文字的狀態欄特效時，請注意頁面左下角的狀態欄。貌似IE8以上版本看不到效果唉。那麼究竟是如何實現的呢？主要是用函數來顯示消息，根據place的值取當前需顯示的字符串，准備在300毫秒後收起顯示，將需取的字符串長度計數器加一准備下一次顯示；同時使用函數隱藏消息，取Message右邊的一定長度的字符串，設定消隱下一個字符的延時。
運行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/js-status-bar-scroll-show-codes/
具體代碼如下：
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var Message=" 歡迎光臨，請多多提出你的建議!!! "; //這裡可自定義顯示內容
var place=1;
function scrollIn() { //這個函數用來顯示消息
window.status=Message.substring(0, place); //根據place的值取當前需顯示的字符串
if (place >= Message.length) { //如果全部信息已經顯示完畢
place=1; //則將place重置
window.setTimeout("scrollOut()",300); //准備在300毫秒後收起顯示
} else { //否則(信息還沒有顯示完)
place++; //將需取的字符串長度計數器加一
window.setTimeout("scrollIn()",50); //准備下一次顯示
}
}
function scrollOut() { //這個函數用來消隱消息
window.status=Message.substring(place, Message.length); //取Message右邊的一定長度的字符串
if (place >= Message.length) { //如果已經無字符可取(信息已經完全消隱)
place=1; //則初始化place
window.setTimeout("scrollIn()", 100); //設定下一次操作是顯示信息
} else { //否則(信息還沒有消隱完畢)
place++; //計數器加一
window.setTimeout("scrollOut()", 50); //設定消隱下一個字符的延時
}
}
// End -->
</SCRIPT>
<title>來回出現文字的狀態欄特效</title>
</head>
<body onLoad="scrollIn()">
<b>請注意頁面左下角的狀態欄</b>
</body>
希望本文所述對大家JavaScript程序設計有所幫助。
小編推薦
熱門推薦