Page "Status bar" text special effects full introduction

Source: Internet
Author: User
Tags reset
Introduction | Web page

When we pay attention to the Internet is often the content of the site page, and the status bar will not be too much attention, if we give the status of the page to add some special effects, will certainly make your site add a landscape, the following gives you 7 common status bar effects of the JavaScript code.

Effect One: Scrolling display

First step: Add the following code to the < head> area

< script language= "Javascript" >

<!--

function Scrollit (seed) {

var m1 = "Hi: Hello!";

var m2 = "Welcome to visit Web Teaching network";

var m3 = "Please advise more, thank you!";

var m4 = "You are welcome to come again next time!" ";

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 < = && 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>

Step Two: Add the following code to the < body> area

< body background=bag.gif >

Special effects Two: text from the right side of the status bar in the Loop pop-up

Add the following code to the < head> area

< script language= "Javascript" >

var message = "Welcome to the Web Teaching network, please comment more." Thank you! "

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>

Effects three: Title pop-up effect

Add the following code to the < head> area

< script language= "JavaScript" >

<!--Hide Me

var index_count = 0;

var title_string = "Welcome to Web Teaching Network, (www.webjx.com) There are many articles on computer applications here.

, is a good place for you to learn web-making technology! ";

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>

   

Effect Four: Text combination pop-up

First step: Add the following code to the < head> area

< script language= "JavaScript" >

<!--Hide This script from the old browsers-

var speed = 10

var pause = 1500

var Timerid = null

var bannerrunning = False

var ar = new Array ()

Ar[0] = "Welcome to Web Teaching Network!" "

AR[1] = "It is a good helper of your school web-making technology!" "

AR[2] = "Please give more comments, thank you!"

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>

   

Step Two: Add the following code to the < body> area

< body bgcolor= "#fef4d9" >

Special effects Five: the text keeps flashing

First step: Add the following code to the < head> area

< script language= "" >

<!--

var yourwords = "Welcome to the Web Teaching network (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>

Step Two: Add the following code to the < body> area

< body bgcolor= "#fef4d9" >

Special Effects VI: Text appears back and forth

First step: Add the following code to the < head> area

< script language= "Javascript" >

<!--Begin

var message= "Welcome to the Web Teaching network (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>

Step Two: Change the contents of < body> to:

< body bgcolor= "#fef4d9" >

Special Effects VII: status bar fixed information

< body bgcolor= "#fef4d9" >



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.