网页“状态栏”文字特殊效果全攻略

　　 

　　在上网时我们注意往往是网站页面内容，而状态栏不会被人太多注意，如果我们给页面的状态栏加一些特效，肯定会使你的网站增添一道风景，下面就给大家介绍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.ltesting.net