导航条之五

提示：把鼠标放到黑色的按钮上看看有什么效果？(先放到左方哦!)

1.将下面的代码复制到<body>中你想该滚动条出现的地方

body{
overflow-x:hidden;
overflow-y:scroll;
}

/*
Scrollable Menu Links- By Dynamicdrive.com
For full source, TOS, and 100s DTHML scripts
Visit http://dynamicdrive.com
*/

//configure path for left and right arrows
var goleftimage='../tempimgs/clock/pointer2.gif'
var gorightimage='../tempimgs/clock/pointer.gif'
//configure menu width
var menuwidth=300
//configure scroll speed (1-10), where larger is faster
var scrollspeed=6
//specify menu content
var menucontents='<a href="../../../www.dynamicdrive.com/index.html">Dynamic Drive</a> | <a href="../../../wsabstract.com/index.html">Website Abstraction</a> | <a href="../../../www.codearena.com/index.html">CodeArena.com</a> | <a href="../../../www.builder.com/index.html">Builder.com</a> | <a href="../../../freewarejava.com/index.html">Freewarejava.com</a>'

////NO NEED TO EDIT BELOW THIS LINE////////////

var actualwidth=''
var ns_scroll
function fillup(){
if (document.all){
test2.innerHTML=menucontents
actualwidth=test2.offsetWidth
}
else if (document.layers){
ns_scroll=document.ns_scrollmenu.document.ns_scrollmenu2
ns_scroll.document.write(menucontents)
ns_scroll.document.close()
actualwidth=ns_scroll.document.width
}
}
window.onload=fillup

function moveleft(){
if (document.all&&test2.style.pixelLeft>(menuwidth-actualwidth))
test2.style.pixelLeft-=scrollspeed
else if (document.layers&&ns_scroll.left>(menuwidth-actualwidth))
ns_scroll.left-=scrollspeed
lefttime=setTimeout("moveleft()",50)
}

function moveright(){
if (document.all&&test2.style.pixelLeft<0)
test2.style.pixelLeft+=scrollspeed
else if (document.layers&&ns_scroll.left<0)
ns_scroll.left+=scrollspeed
righttime=setTimeout("moveright()",50)
}

if (document.all||document.layers){
with (document){
write('<table border="0" cellspacing="0" cellpadding="0">')
write('<td valign="middle"><a href=#" onMouseover="moveleft()" onMouseout="clearTimeout(lefttime)"><img src="'+goleftimage+'"border=0></a> </td>')
write('<td valign="top">')
if (document.all){
write('')
write('')
write('')
write('')
}
else if (document.layers){
write('<ilayer width='+menuwidth+' name="ns_scrollmenu">')
write('<layer name="ns_scrollmenu2" left=0 top=0></layer></ilayer>')
}
write('</td>')
write('<td valign="middle"> <a href="#" onMouseover="moveright()" onMouseout="clearTimeout(righttime)">')
write('<img src="'+gorightimage+'"border=0></a>')
write('</td></table>')
}
}

2.请修改代码中的这些地方
//配置左方与右方的图片路径
var goleftimage='pointer2.gif'
var gorightimage='pointer.gif'
//设置滚动条的长度
var menuwidth=300
//设置滚动条的速度(1-10),越大越块
var scrollspeed=6
//设置栏目的内容与连接
var menucontents='<a href="http://www.dynamicdrive.com">Dynamic Drive</a> | <a href="http://wsabstract.com">Website Abstraction</a> | <a href="http://www.codearena.com">CodeArena.com</a> | <a href="http://www.builder.com">Builder.com</a> | <a href="http://freewarejava.com">Freewarejava.com</a>'