利用JavaScript和CSS制作浮动menu-搜狐数码天下

搜狐首页-新闻-体育-娱乐-财经-IT-汽车-房产-家居-女人-TV-ChinaRen-邮件-博客-BBS-搜狗



数码天下 > 网狐学园-全中国人的电脑学习中心 > 网络应用-网狐学园 > 网页制作


利用JavaScript和CSS制作浮动menu

时间：2001年08月29日10:34 作者：齐力周鑫玲

相关新闻:

随着INTERNET的高速发展，越来越多的人拥有了个人主页，但以往的静态HTML语言，已经不能满足人们的要求。JavaScript和多层模式表单（Cascading Style Sheet, CSS）的出现使网页更加生动活泼，从而可以获得令人满意的效果。

本文以JavaScript和CSS制作一种浮动菜单的方法为例，来说明其灵活性，同时也是抛砖引玉希望和广大网友共同切磋技术，制作出更好的家页（homepage）.当我们浏览一个超过屏幕显示范围的一个页面时，为了回到菜单项，往往需要向上移动滚动条来完成，而使用浮动菜单则省去了这个麻烦，页面上的浮动菜单选项随着你向上或向下浏览页面而自动的移动。但并不是所有的页面都适合浮动菜单的使用，只有在菜单相对较短，在屏幕上可以完整显示；而正文相对较长，在屏幕上不能全部显示，需要拖动滚动条来完成，使用浮动菜单可以取得意想不到的结果。程序如下：
　　
　　< html >
　　< head >< meta http-equiv="Content-Type" content="text/html; charset=gb2312" >
　　< style type="text/css" >
　　< !--
　　A{ text-transform: none; text-decoration: none; color:black}
　　A:hover{ color:blue; text-decoration:underline;}
　　-- >
　　< /style >
　　< title >测试< /title >
　　< /head >
　　< body bgcolor="#FFFFFF" >
　　< table width="75%" border="0" align="right" >
　　< tr >
　　< td >< font face="楷体_GB2312" size="5" color="#990033" >
　　< b >< p align="center" >< /b >< /font >利用JavaScript
　　和CSS制作浮动menu< /td >
　　< /tr >
　　< tr >
　　< td >< p align="center" >天津大学齐力周鑫玲< /td >
　　< /tr >
　　< tr >
　　< td > 一份名为"HealthCast2010"的全球性医疗保健调查报告
　　显< p >示，在未来几年时间里互联网将给全球医疗保健工业带来巨大< /p >
　　< p >的变化。调查对象为来自美国、加拿大、英国、澳大利亚、法< /p >
　　< p >国、德国、芬兰、新西兰和西班牙的400位医疗保健工业的资深< /p >
　　< p > ... ... < /p >
　　< p >顾客数量将随在线药店不同而有所差别，但不取决于医疗机构< /p >
　　< p >大小。这将对传统的名牌大医院带来很大的冲击。 < /td >
　　< /tr >
　　< /table >
　　< div id="win0" style="position:absolute; Right:10px; top:10px; width:136px; height:227px; z-index:25" >
　　< table width="99%" border="0" >
　　< tr >
　　< td background="../9908pic/feature3.gif" >
　　< p align="center" >【< a href="../all/news.htm" >最新消息< /a >】
　　< /td >
　　< /tr >
　　< tr >
　　< td background="../9908pic/help3.gif" >
　　< p align="center" >【< a href="telmedicine.html" >远程医疗< /a >】
　　< /td >
　　< /tr >
　　< tr >
　　< td background="../9908pic/net3.gif" >
　　< p align="center" >【< a href="../all/new.htm" >新品世界< /a >】
　　< /td >
　　< /tr >
　　< tr >
　　< td background="../9908pic/living3.gif" >
　　< p align="center" >【< a href="../all/syberspace-feature.htm" > 生活资源< /a >】
　　< /td >
　　< /tr >
　　< tr >
　　< td background="../9908pic/net3.gif" >
　　< p align="center" >【< a href="../all/netware.htm" >查询技巧< /a >】
　　< /td >
　　< /tr >
　　< tr >
　　< td background="../9908pic/free3.gif" >
　　< p align="center" >【< a href="software/index.htm" target="_blank" >软件下载< /a >】
　　< /td >
　　< /tr >
　　< tr >
　　< td background="../9908pic/lab3.gif" >
　　< p align="center" >【< a href="../lab/lab.htm" >实验传真< /a >】
　　< /td >
　　< /tr >
　　< tr >
　　< td background="../9908pic/mail3.gif" >
　　< p align="center" >【< a href="../all/lianxi.htm" >联系我们< /a >】
　　< /td >
　　< /tr >< /table >< /div >
　　< script language="JavaScript" >
　　IE4=(document.all)?1:0if (IE4)
　　setInterval('keepIE("win0",10,10)',1)
　　function keepIE(theName,theWantTop,theWantRight) { theRealTop=parseInt(document.body.scrollTop)
　　theTrueTop=theWantTop+theRealTop
　　document.all[theName].style.top=theTrueTop theRealRight=parseInt(document.body.scrollRight) theTrueRight=theWantRight+theRealRight document.all[theName].style.Right=theTrueRight}
　　< /script >
　　< /body >
　　< /html >