網頁“狀態欄”文字特殊效果全攻略

　　 

　　在上網時我們注意往往是網站頁面內容，而狀態欄不會被人太多注意，如果我們給頁面的狀態欄加一些特效，肯定會使你的網站增添一道風景，下面就給大家介紹7種常見的狀態欄特效的Javascript代碼。

　　特效一：滾動顯示

　　第一步:把如下代碼加入< head>區域中

　　< script language="Javascript">

　　< !--

　　function scrollit(seed) {

　　var m1 = "HI：你好! ";

　　var m2 = "歡迎訪問網頁教學網";

　　var m3 = "請多提意見，謝謝! ";

　　var m4 = "歡迎您下次再來！";

　　var m5 = "www.webjx.com ";

　　var msg=m1+m2+m3+m4+m5;

　　var out = " ";

　　var c = 1;

　　if (seed > 100) {

　　seed--;

　　cmd="scrollit("+seed+")";

　　timerTwo=window.setTimeout(cmd,100);

　　}

　　else if (seed < = 100 && seed > 0) {

　　for (c=0 ; c < seed ; c++) {

　　out+=" ";

　　}

　　out+=msg;

　　seed--;

　　window.status=out;

　　cmd="scrollit("+seed+")";

　　timerTwo=window.setTimeout(cmd,100);

　　}

　　else if (seed < = 0) {

　　if (-seed < msg.length) {

　　out+=msg.substring(-seed,msg.length);

　　seed--;

　　window.status=out;

　　cmd="scrollit("+seed+")";

　　timerTwo=window.setTimeout(cmd,100);

　　}

　　else {

　　window.status=" ";

　　timerTwo=window.setTimeout("scrollit(100)",75);

　　}

　　}

　　}

　　//-->

　　< /script>

　　第二步:把如下代碼加入< body>區域中

　　< body background=bag.gif onLoad="scrollit(100)">

　　特效二：文字從狀態欄的右邊循環彈出

　　把如下代碼加入< head>區域中

　　< script language="Javascript">

　　var MESSAGE = "歡迎來到網頁教學網，請多提意見。謝謝! "

　　var POSITION = 150

　　var DELAY = 10

　　var scroll = new statusMessageObject()

　　function statusMessageObject(p,d) {

　　this.msg = MESSAGE

　　this.out = " "

　　this.pos = POSITION

　　this.delay = DELAY

　　this.i = 0

　　this.reset = clearMessage}

　　function clearMessage() {

　　this.pos = POSITION}

　　function scroller() {

　　for (scroll.i = 0; scroll.i < scroll.pos; scroll.i++) {

　　scroll.out += " "}

　　if (scroll.pos >= 0)

　　scroll.out += scroll.msg

　　else scroll.out = scroll.msg.substring(-scroll.pos,scroll.msg.length)

　　window.status = scroll.out

　　scroll.out = " "

　　scroll.pos--

　　if (scroll.pos < -(scroll.msg.length)) {

　　scroll.reset()}

　　setTimeout ('scroller()',scroll.delay)}

　　function snapIn(jumpSpaces,position) {

　　var msg = scroll.msg

　　var out = ""

　　for (var i=0; i< position; i++)

　　{out += msg.charAt(i)}

　　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>

　　特效三：title彈出效果

　　把如下代碼加入< head>區域中

　　< script language="javascript">

　　< !-- Hide me

　　var index_count = 0;

　　var title_string = "歡迎光臨網頁教學網,(www.webjx.com)這里有許多電腦應用方面的文章

　　，是您學習網頁制作技術的好去處!希望您能夠常來！";

　　var title_length = title_string.length;

　　var cmon;

　　var kill_length = 0;

　　function loopTheScroll()

　　{

　　scrollTheTitle();

　　if(kill_length > title_length)

　　{

　　clearTimeout(cmon);

　　}

　　kill_length++;

　　cmon = setTimeout("loopTheScroll();",100)

　　}

　　function scrollTheTitle()

　　{

　　var doc_title = title_string.substring((title_length - index_count - 1),title_length);

　　document.title = doc_title;

　　index_count++;

　　}

　　loopTheScroll();

　　//-->

　　< /script>

　　　

　　特效四：文字組合彈出

　　第一步:把如下代碼加入< head>區域中

　　< script language="javascript">

　　< !-- Hide this script from old browsers --

　　var speed = 10

　　var pause = 1500

　　var timerID = null

　　var bannerRunning = false

　　var ar = new Array()

　　ar[0] = "歡迎來到網頁教學網！"

　　ar[1] = "它是您學校網頁制作技術的好幫手！"

　　ar[2] = "請多提意見，謝謝! "

　　var message = 0

　　var state = ""

　　clearState()

　　function stopBanner() {

　　if (bannerRunning)

　　clearTimeout(timerID)

　　bannerRunning = false

　　}

　　function startBanner() {

　　stopBanner()

　　showBanner()

　　}

　　function clearState() {

　　state = ""

　　for (var i = 0; i < ar[message].length; ++i) {

　　state += "0"

　　}

　　}

　　function showBanner() {

　　if (getString()) {

　　message++

　　if (ar.length < = message)

　　message = 0

　　clearState()

　　timerID = setTimeout("showBanner()", pause)

　　bannerRunning = true

　　} else {

　　var str = ""

　　for (var j = 0; j < state.length; ++j) {

　　str += (state.charAt(j) == "1") ? ar[message].charAt(j) : " "

　　}

　　window.status = str

　　timerID = setTimeout("showBanner()", speed)

　　bannerRunning = true

　　}

　　}

　　function getString() {

　　var full = true

　　for (var j = 0; j < state.length; ++j) {

　　if (state.charAt(j) == 0)

　　full = false

　　}

　　if (full)

　　return true

　　while (1) {

　　var num = getRandom(ar[message].length)

　　if (state.charAt(num) == "0")

　　break

　　}

　　state = state.substring(0, num) + "1" + state.substring(num + 1, state.length)

　　return false

　　}

　　function getRandom(max) {

　　return Math.round((max - 1) * Math.random())

　　}

　　// -- End Hiding Here -->

　　< /script>

　　　

　　第二步:把如下代碼加入< body>區域中

　　< body bgcolor="#fef4d9" onLoad="startBanner()">

　　特效五：文字不停閃爍

　　第一步:把如下代碼加入< head>區域中

　　< script language="">

　　< !--

　　var yourwords = "歡迎光臨網頁教學網(www.webjx.com)!!!";

　　var speed = 700;

　　var control = 1;

　　function flash()

　　{

　　if (control == 1)

　　{

　　window.status=yourwords;

　　control=0;

　　}

　　else

　　{

　　window.status="";

　　control=1;

　　}

　　setTimeout("flash()",speed);

　　}

　　// -->

　　< /script>

　　第二步:把如下代碼加入< body>區域中

　　< body bgcolor="#fef4d9" onLoad="flash()">

　　特效六：文字來回出現

　　第一步:把如下代碼加入< head>區域中

　　< script LANGUAGE="Javascript">

　　< !-- Begin

　　var Message="歡迎光臨網頁教學網(www.webjx.com)!!!!!";

　　var place=1;

　　function scrollIn() {

　　window.status=Message.substring(0, place);

　　if (place >= Message.length) {

　　place=1;

　　window.setTimeout("scrollOut()",300);

　　} else {

　　place++;

　　window.setTimeout("scrollIn()",50);

　　}

　　}

　　function scrollOut() {

　　window.status=Message.substring(place, Message.length);

　　if (place >= Message.length) {

　　place=1;

　　window.setTimeout("scrollIn()", 100);

　　} else {

　　place++;

　　window.setTimeout("scrollOut()", 50);

　　}

　　}

　　// End -->

　　< /script>

　　第二步:把< body>中的內容改為:

　　< body bgcolor="#fef4d9" onLoad="scrollIn()">

　　特效七：狀態欄固定信息

　　< body bgcolor="#fef4d9" onmouseover="self.status='歡迎光臨“網頁教學網”--http://www.webjx.com';return">

原文轉自：http://www.kjueaiud.com