0顶

相当漂亮的导航窗

稿源：互联网 2022-04-04 17:24:37 点击： 2467 撤稿纠错

效果有点科幻，由扭曲渐显文字。

以下讨论的是和导航相关的相当漂亮的导航窗教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

要完成此效果需要两个步骤

第一步：把如下代码加入到<body>区域中

// the URLs of your messages
var messageurl=new Array()
messageurl[0]="http://www.sina.com.cn/"
messageurl[1]="http://www.163.com/"
messageurl[2]="http://www.sohu.com/"

// the targets of the links
// accepted values are '_blank' or '_top' or '_parent' or '_self'
// or the name of your target-window (for instance 'main')
var messagetarget=new Array()
messagetarget[0]="_blank"
messagetarget[1]="_blank"
messagetarget[2]="_blank"

// the text of your links. In this sample it's the word 'more'
var linktext="去看看"
// font-size
var fntsize=11

// font-color
var fntcolor="FFFF00"

// font-family
var fntfamily="Verdana"

// font-weight: 1 means bold, 0 means normal
var fntweight=0

// standstill of each image(seconds)
var pause=3

var backgroundcolor="444444"

// horizontal position of the slideshow (distance to the left margin of the browser-window, pixels)
var posleft=5

// vertical position of the slideshow (distance to the top margin of the browser-window, pixels)
var postop=5

// width of the textbox (pixels)
var scrollerwidth=200

// height of the textbox (pixels)
var scrollerheight=150

// width of the border (pixels)
var scrollerborder=2

// width of the textpadding (pixels)
var textpadding=15

// do not edit the variables below
var textwidth=scrollerwidth-(2*textpadding)
var textcontent=""
var bgcontent=""
var I_message=0
var I_stepwave=0
var I_maxstepwave=20
pause=pause*1000
if (fntweight==1) {fntweight="700"}
else {fntweight="100"}

function initiate() {
gettextcontent()
getbgcontent()
if (document.all) {
wavemessage.innerHTML=textcontent
wavemessagebg.innerHTML=bgcontent
wavemessagebg.style.posLeft=posleft
wavemessagebg.style.posTop=postop
wavemessage.style.posLeft=posleft+textpadding
wavemessage.style.posTop=postop+textpadding
enlargewave()
}
if (document.layers) {
document.wavemessage.left=posleft+textpadding
document.wavemessage.top=postop+textpadding
document.wavemessagebg.document.write(bgcontent)
document.wavemessagebg.document.close()
document.wavemessagebg.left=posleft
document.wavemessagebg.top=postop
changemessage()
}
}

function enlargewave() {
if (I_stepwave<=I_maxstepwave) {
wavemessage.filters.wave.phase=I_stepwave
wavemessage.filters.wave.strength=I_stepwave
wavemessage.filters.wave.lightstrength=I_stepwave
wavemessage.filters.wave.freq=I_stepwave
I_stepwave++
var timer=setTimeout("enlargewave()",50)
}
else {
clearTimeout(timer)
changemessage()
}
}

function reducewave() {
if (I_stepwave>0) {
wavemessage.filters.wave.phase=I_stepwave
wavemessage.filters.wave.strength=I_stepwave
wavemessage.filters.wave.lightstrength=I_stepwave
wavemessage.filters.wave.freq=I_stepwave
I_stepwave--
var timer=setTimeout("reducewave()",50)
}
else {
clearTimeout(timer)
var timer=setTimeout("enlargewave()",pause)
}
}

function changemessage() { 
I_message++
if (I_message>=message.length) {I_message=0}
gettextcontent()

if (document.all) { 
wavemessage.innerHTML=textcontent
reducewave()
}

if (document.layers) {
document.wavemessage.document.write(textcontent)
document.wavemessage.document.close()
var timer=setTimeout("changemessage()",pause)
}

}

function gettextcontent() {
textcontent="<span style='font-size:"+fntsize+"pt;font-family:"+fntfamily+";font-weight:"+fntweight+";width:"+textwidth+"px'>"
textcontent+="<font color="+fntcolor+">"+message[I_message]+"</font> "
textcontent+="<a href="+messageurl[I_message]+" target="+messagetarget[I_message]+">"
textcontent+="<br><br><font color="+fntcolor+">"+linktext+"</font></a></span>"
}

function getbgcontent() {
bgcontent="<table width="+scrollerwidth+" height="+scrollerheight+" border="+scrollerborder+"><tr><td bgcolor="+backgroundcolor+">&nbsp;</td></tr></table>"
}

// - End of JavaScript - -->
</script> 
<div ID="wavemessagebg" style="position:absolute;">
</div>
<div ID="wavemessage" style="position:absolute; filter:wave()">
</div>
<div id="deletethisblock" style="position:absolute;top:5px;left:220px;">
</div>

第二步：把“onLoad="initiate()"”加在<body>标记里
例如：<body onLoad="initiate()">

<a href="http://www.alixixi.com/Dev/HTML/jsrun/">欢迎访问阿里西西网页特效集</a>

关于相当漂亮的导航窗的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2008071582.shtml方便下次再访问哦。

·上一篇： 仿QQ自动隐藏效果
·下一篇： 链接就像开始菜单一样分层效果

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

相当漂亮的导航窗

文章分类LIST >>返回首页

最新游戏

最新新闻