左右箭头控制菜单滚动

人气：　来源：本站原创　作者：佚名　所属栏目：导航类　[切换到繁體中文]

介绍：一个用左右箭头控制菜单滚动的导航条。

演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>站长手册_特效演示_左右箭头控制菜单滚动</title>
<style><!--body,td{font-size: 12px;}--></style>

</head>
<body bgcolor="" 无>
<table width="100%" height="1000" border="0" cellpadding="10" cellspacing="5">
<tr>
<td valign="top">
<script language="JavaScript1.2">

//配置左右箭头路径
var goleftimage='/texiao/zzsc_demo/dottom.gif'
var gorightimage='/texiao/zzsc_demo/top.gif'
//配置菜单宽度
var menuwidth=300
//定义滚动速度(1-10),越大越快
var scrollspeed=6
//定义菜单内容
var menucontents='<nobr><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></nobr>'


////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('<span style="position:relative;width:'+menuwidth+';">')
write('<span style="position:absolute;width:'+menuwidth+';clip:rect(0 '+menuwidth+' auto 0)">')
write('<span id="test2" style="position:absolute;left:0;top:0">')
write('</span></span></span>')
}
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>')
}
}
</script>
</td>
</tr>
</table>
</body>
</html>

[Ctrl+A全选提示：你可先修改部分代码，再按运行]

下面教你如何应用此特效：
　--------------------------------------------------------------------------------------
　　需要在<body 这里>加入的代码：无
　--------------------------------------------------------------------------------------

以下代码加到<head>…</head>中

以下代码加到<body>…</body>中

//配置左右箭头路径
var goleftimage='/texiao/zzsc_demo/dottom.gif'
var gorightimage='/texiao/zzsc_demo/top.gif'
//配置菜单宽度
var menuwidth=300
//定义滚动速度(1-10),越大越快
var scrollspeed=6
//定义菜单内容
var menucontents='<nobr><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></nobr>'

////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('<span style="position:relative;width:'+menuwidth+';">')
write('<span style="position:absolute;width:'+menuwidth+';clip:rect(0 '+menuwidth+' auto 0)">')
write('<span id="test2" style="position:absolute;left:0;top:0">')
write('</span></span></span>')
}
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>')
}
}
</script>