滑动式菜单风格 |
|
制作的时候直接将下面代码复制到网页HTML代码中,菜单要出现的位置就可以了
<style> body{ overflow-x:hidden; overflow-y:scroll; } </style> <script language="JavaScript1.2"> /* Scrollable Menu Links- By Dynamicdrive.com For full source, TOS, and 100s DTHML scripts Visit http://dynamicdrive.com */ //配置左右箭头路径 var goleftimage='pointer2.gif' var gorightimage='pointer.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> 菜单项目的修改和增加 只要直接修改上面的灰色底纹部分代码就可以了。也就是这里: //configure path for left and right arrows var goleftimage='pointer2.gif' var gorightimage='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='<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>' goleftimage=''指向的是左边按钮的图片。可以引号中的内容替换成为你自己的图片文件名。 gorightimage='' 指向的是右边按钮的图片。可以引号中的内容替换成为你自己的图片文件名。 menuwidth=300设定的是菜单宽度 scrollspeed=6 是滚动的速度,1-10。10最快 1最慢。 菜单项目的添加: 在menucontents中<nobr></nobr>之间添加连接形式为<a href="地址 ">菜单名称</a> |