用JavaScript实现浮动菜单
打开一个HTML编辑器(FrontPage、Dreamweaver),不过在写JavaScript的时候我还是喜欢用“记事本”。首先要写两个函数,第一个用来根据不同的浏览器组织起一句很关键的处理菜单位置的语句,就叫做setVariables(),另外一个是用函数来调用setVariables()里的那条语句并设定菜单位置和位置刷新的时间间隔,源程序如下:
<script language=″JavaScript″> //一看就知道,是告诉浏览器下面要用的语言。
function setVariables() //定义函数setVariables()
{if (navigator.appName == ″Netscape″) //如果浏览器是Netscape就执行下面的命令
{v=″.top=″;
dS=″document.″;
sD=″″;
y=″window.pageYOffset″;} //如果你不明白上面的字符变量在干什么,那么看过下面的checkLocation()就会知道了
else { //如果不是Netscape浏览器就执行下面的语句
v=″.pixelTop=″;
dS=″″;
sD=″.style″;
y=″document.body.scrollTop+x″; //x代表浮动菜单所在位置至窗口顶端的距离
}
}
function checkLocation() //定义函数checkLocation()
{object=″layer″;//定义引号里的对象为object,方便后面改动(layer会在后面定义)
yy=eval(y);
eval(dS+object+sD+v+yy); //看到了吧,把前面setVariables()的字符串接在一起成了一个定义object纵向位置的语句
setTimeout(″checkLocation()″,10); //设定每次刷新菜单位置的时间间隔,如果你设成10000那么菜单在滚动窗口十秒后才会在你指定的那个位置出现
}
for(i=1;i<100;i++){document.write(i+″<br>″);} //循环产生100行文字,用于测试浮动菜单效果,应用到你的html里后记得删除这两行
</script>//以上代码请放到html页的<head>区里,使浏览器首先调用
下面我们来完成菜单的内容。浮动菜单其实就是一个层,那么你就可以在层中插入任何的东西,图像、文字甚至是Flash等等,也就是说层的样式可以由你来任意设计。内容如下:
<body OnLoad=″setVariables();checkLocation()″> //调用<head>中已声明的函数
<div id=″layer″ style=″position:absolute; visibility:show; left:0px; z-index:1″> //建立一个层,其中left参数是浮动菜单距浏览器左边框的距离,z-index是本层相对其它层的位置,例如,值为2的层位置就在第二层的上边。其它参数如背景图案等在Dreamweaver或FrontPage中可自行设计。
<table width=128 border=0 cellspacing=20 cellpadding=0> //制表
<tr>
<td height=″97″>
<a href=″index1.html″><img src=″image1.gif″ width=″105″ height=″21″ border=″0″></a><br> //菜单的第一项href中是链接地址,后面我用的是一个小图像来显示菜单项,如果用文字****代替<img src=……>,那么菜单中将会显示一个****的超级链接。
<a href=″index2.htm″><img src=″image2.gif″ width=″105″ height=″21″ border=″0″></a><br>
<a href=″index3.htm″><img src=″image3.gif″ width=″105″ height=″21″ border=″0″></a><br>
<a href=″index4.htm″><img src=″image4.gif″ width=″105″ height=″21″ border=″0″></a></td>
</tr>
</table>
</div>
<body> //把以上代码加入到你的<body>区
浮动菜单就完成了,运行一下看看满不满意。希望它能给你的主页带来更多的访问者。