分享
 
 
 

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

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有