2012-11-02 来源:网络
【实例名称】
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 (" <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代码的准确性,请点击:滚动导航菜单 进行本实例源码下载