当前位置:软件学堂 > 资讯首页 > 网络编程 > 编程其他 > JS代码实现滚动导航菜单

JS代码实现滚动导航菜单

2012/11/2 20:15:27作者:佚名来源:网络

移动端

【实例名称】

JS代码实现滚动导航菜单

【实例描述】

导航菜单可以是隐藏式,可以是静止式,还可以是下拉式。本例学习一种滚动式的导航菜单。

【实例代码】

<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页-学无忧(www.xue51.com)</title> </head> <body> <script language=javascript> var index = 9 link = new Array(8); text = new Array(8); link[0] ='link1.htm'//保存链接的数组 link[1] ='link2.htm' link[2] ='link3.htm' link[3] ='link1.htm' link[4] ='link2.htm' link[5] ='link3.htm' link[6] ='link1.htm' link[7] ='link2.htm' link[8] ='link3.htm' text[0] ='链接说明一'//保存说明的数组 text[1] ='链接说明一' text[2] ='链接说明一' text[3] ='链接说明一' text[4] ='链接说明一' text[5] ='链接说明一' text[6] ='链接说明一' text[7] ='链接说明一' text[8] ='链接说明一' //实现滚动的脚本 document.write ("<marquee scrollamount='1' scrolldelay='100' direction= 'up' width='150' height='150'>"); for (i=0;i<index;i++){ document.write ("&nbsp;<a href="+link[i]+" target='_blank'>");  //循环输出链接内容 document.write (text[i] + "</A><br>"); } document.write ("</marquee>") </script> </body> </html>

【运行效果】

 滚动导航菜单运行效果

【难点剖析】

本例的重点是将“marquee”标签和“a”标签结合。首先将所有的链接URL和链接说明封装在两个数组中.然后在“marquee”标签中使用循环,循环“a”标签,并指定每个“a”标签的URL和链接说明。

【源码下载】

为了JS代码的准确性,请点击:滚动导航菜单 进行本实例源码下载 

标签: 菜单