利用JavaScript和CSS制作浮动menu-javascript-IT落伍者

随着INTERNET的高速发展越来越多的人拥有了个人主页但以往的静态HTML语言已经不能满足人们的要求javascript和多层模式表单（Cascading Style Sheet CSS）的出现使网页更加生动活泼从而可以获得令人满意的效果本文以javascript和CSS制作一种浮动菜单的方法为例来说明其灵活性同时也是抛砖引玉希望和广大网友共同切磋技术制作出更好的家页（homepage）当我们浏览一个超过屏幕显示范围的一个页面时为了回到菜单项往往需要向上移动滚动条来完成而使用浮动菜单则省去了这个麻烦页面上的浮动菜单选项随着你向上或向下浏览页面而自动的移动但并不是所有的页面都适合浮动菜单的使用只有在菜单相对较短在屏幕上可以完整显示而正文相对较长在屏幕上不能全部显示需要拖动滚动条来完成使用浮动菜单可以取得意想不到的结果程序如下

<html>

<head>

A{ texttransform: none; textdecoration: none; color:black}

A:hover{ color:blue; textdecoration:underline;}

</style>

<title>利用javascript 和CSS制作浮动menu</title>

</head>

<tr>

<b><p align=center></b></font>利用javascript

和CSS制作浮动menu</td>

</tr>

<tr>

<td><p align=center>网页教学网整理</td>

</tr>

<tr>

<td> 一份名为HealthCast的全球性医疗保健调查报告

显<p>示在未来几年时间里互联网将给全球医疗保健工业带来巨大</p>

<p>的变化调查对象为来自美国加拿大英国澳大利亚法</p>

<p>国德国芬兰新西兰和西班牙的位医疗保健工业的资深</p>

<p>顾客数量将随在线药店不同而有所差别但不取决于医疗机构</p>

<p>大小这将对传统的名牌大医院带来很大的沖击 </td>

</tr>

</table>

<tr>

<p align=center>【<a >最新消息</a>】

</td>

</tr>

<tr>

<p align=center>【<a >远程医疗</a>】

</td>

</tr>

<tr>

<p align=center>【<a >新品世界</a>】

</td>

</tr>

<tr>

<p align=center>【<a > 生活资源</a>】

</td>

</tr>

<tr>

<p align=center>【<a >查询技巧</a>】

</td>

</tr>

<tr>

<p align=center>【<a target=_blank>软件下载</a>】

</td>

</tr>

<tr>

<p align=center>【<a >实验传真</a>】

</td>

</tr>

<tr>

<p align=center>【<a >联系我们</a>】

</td>

</tr></table></div>

IE=(documentall)?:if (IE)

setInterval(keepIE(win))

function keepIE(theNametheWantToptheWantRight) { theRealTop=parseInt(documentbodyscrollTop)

theTrueTop=theWantTop+theRealTop

documentall[theName]styletop=theTrueTop theRealRight=parseInt(documentbodyscrollRight) theTrueRight=theWantRight+theRealRight documentall[theName]styleRight=theTrueRight}

</script>

</body>

</html>

演示效果如下

<html><head><meta http<fp class='fp-bbx6e'></fp>equiv=<fp class='fp-u2eqi'></fp>Content<fp class='fp-bbx6e'></fp>Type<fp class='fp-1llyj'></fp> content=<fp class='fp-u2eqi'></fp>text/html; charset=gb<fp class='fp-xq0wi'></fp><fp class='fp-ang48'></fp><fp class='fp-fi9bx'></fp><fp class='fp-84s6j'></fp><fp class='fp-1llyj'></fp>><style type=<fp class='fp-u2eqi'></fp>text/css<fp class='fp-ei169'></fp>><!<fp class='fp-bbx6e'></fp><fp class='fp-bno8w'></fp> A{ text<fp class='fp-az86q'></fp>transform: none; text<fp class='fp-bno8w'></fp>decoration: none; color:black}A:hover{ color:blue; text<fp class='fp-bno8w'></fp>decoration:underline;}<fp class='fp-bno8w'></fp><fp class='fp-az86q'></fp>></style> <link stylesheet<fp class='fp-s7yrb'></fp> type=<fp class='fp-1llyj'></fp>text/css<fp class='fp-u2eqi'></fp> /><title>利用javascript 和CSS制作浮动menu</title></head> <body bgcolor=<fp class='fp-1llyj'></fp>#FFFFFF<fp class='fp-ei169'></fp>><table width=<fp class='fp-ei169'></fp><fp class='fp-g6qd3'></fp><fp class='fp-y9goi'></fp>%<fp class='fp-s7yrb'></fp> border=<fp class='fp-1llyj'></fp><fp class='fp-hu7g9'></fp><fp class='fp-s7yrb'></fp> align=<fp class='fp-1llyj'></fp>right<fp class='fp-ei169'></fp>><tr><td><font face=<fp class='fp-1llyj'></fp>楷体_GB<fp class='fp-xq0wi'></fp><fp class='fp-349v7'></fp><fp class='fp-uqno0'></fp><fp class='fp-84s6j'></fp><fp class='fp-s7yrb'></fp> size=<fp class='fp-u2eqi'></fp><fp class='fp-1xd01'></fp><fp class='fp-u2eqi'></fp> color=<fp class='fp-1llyj'></fp>#<fp class='fp-d6c6l'></fp><fp class='fp-m1gjy'></fp><fp class='fp-vqvto'></fp><fp class='fp-hu7g9'></fp><fp class='fp-mjzdt'></fp><fp class='fp-349v7'></fp><fp class='fp-s7yrb'></fp>><b><p align=<fp class='fp-1llyj'></fp>center<fp class='fp-1llyj'></fp>></b></font>利用javascript 和CSS制作浮动menu</td></tr><tr><td><p align=<fp class='fp-s7yrb'></fp>center<fp class='fp-ei169'></fp>>网页教学网整理</td></tr><tr><td> 一份名为<fp class='fp-ei169'></fp>HealthCast<fp class='fp-84s6j'></fp><fp class='fp-4sqyd'></fp><fp class='fp-dul33'></fp><fp class='fp-hu7g9'></fp><fp class='fp-s7yrb'></fp>的全球性医疗保健调查报告显<p>示<fp class='fp-ciw3f'></fp>在未来几年时间里互联网将给全球医疗保健工业带来巨大</p><p>的变化<fp class='fp-rvaqn'></fp>调查对象为来自美国<fp class='fp-j13bg'></fp>加拿大<fp class='fp-j13bg'></fp>英国<fp class='fp-hifer'></fp>澳大利亚<fp class='fp-j13bg'></fp>法</p> <p>国<fp class='fp-n0pom'></fp>德国<fp class='fp-j13bg'></fp>芬兰<fp class='fp-8nb1e'></fp>新西兰和西班牙的<fp class='fp-9s99p'></fp><fp class='fp-vqvto'></fp><fp class='fp-4sqyd'></fp>位医疗保健工业的资深</p><p> <fp class='fp-n7ggz'></fp><fp class='fp-x2sy0'></fp><fp class='fp-xxrov'></fp> <fp class='fp-n7ggz'></fp><fp class='fp-xxrov'></fp><fp class='fp-x2sy0'></fp> </p><p>顾客数量将随在线药店不同而有所差别<fp class='fp-oddoa'></fp>但不取决于医疗机构</p><p>大小<fp class='fp-ebaew'></fp>这将对传统的名牌大医院带来很大的沖击<fp class='fp-yehyo'></fp> </td></tr></table> <div id=<fp class='fp-ei169'></fp>win<fp class='fp-hu7g9'></fp><fp class='fp-ei169'></fp> ><table width=<fp class='fp-ei169'></fp><fp class='fp-m1gjy'></fp><fp class='fp-7gc4d'></fp>%<fp class='fp-ei169'></fp> border=<fp class='fp-s7yrb'></fp><fp class='fp-4sqyd'></fp><fp class='fp-ei169'></fp>><tr> <td background=<fp class='fp-s7yrb'></fp><fp class='fp-xxrov'></fp><fp class='fp-n7ggz'></fp>/<fp class='fp-4gywv'></fp><fp class='fp-7gc4d'></fp><fp class='fp-hu7g9'></fp><fp class='fp-dnubq'></fp>pic/feature<fp class='fp-349v7'></fp><fp class='fp-xxrov'></fp>gif<fp class='fp-u2eqi'></fp>><p align=<fp class='fp-ei169'></fp>center<fp class='fp-ei169'></fp>>【<a >最新消息</a>】</td> </tr> <tr><td background=<fp class='fp-1llyj'></fp><fp class='fp-x2sy0'></fp><fp class='fp-2921p'></fp>/<fp class='fp-m1gjy'></fp><fp class='fp-d6c6l'></fp><fp class='fp-hu7g9'></fp><fp class='fp-czd9k'></fp>pic/help<fp class='fp-mjzdt'></fp><fp class='fp-x2sy0'></fp>gif<fp class='fp-1llyj'></fp>><p align=<fp class='fp-s7yrb'></fp>center<fp class='fp-u2eqi'></fp>>【<a >远程医疗</a>】</td> </tr> <tr><td background=<fp class='fp-s7yrb'></fp><fp class='fp-2921p'></fp><fp class='fp-2921p'></fp>/<fp class='fp-4gywv'></fp><fp class='fp-m1gjy'></fp><fp class='fp-tvfth'></fp><fp class='fp-ovwi5'></fp>pic/net<fp class='fp-trejb'></fp><fp class='fp-xxrov'></fp>gif<fp class='fp-u2eqi'></fp>><p align=<fp class='fp-1llyj'></fp>center<fp class='fp-u2eqi'></fp>>【<a >新品世界</a>】</td></tr> <tr><td background=<fp class='fp-ei169'></fp><fp class='fp-2921p'></fp><fp class='fp-xxrov'></fp>/<fp class='fp-4gywv'></fp><fp class='fp-4gywv'></fp><fp class='fp-tvfth'></fp><fp class='fp-dnubq'></fp>pic/living<fp class='fp-ang48'></fp><fp class='fp-x2sy0'></fp>gif<fp class='fp-ei169'></fp>> <p align=<fp class='fp-ei169'></fp>center<fp class='fp-1llyj'></fp>>【<a > 生活资源</a>】 </td></tr> <tr><td background=<fp class='fp-u2eqi'></fp><fp class='fp-n7ggz'></fp><fp class='fp-xxrov'></fp>/<fp class='fp-4gywv'></fp><fp class='fp-7gc4d'></fp><fp class='fp-hu7g9'></fp><fp class='fp-eut8r'></fp>pic/net<fp class='fp-349v7'></fp><fp class='fp-2921p'></fp>gif<fp class='fp-ei169'></fp>> <p align=<fp class='fp-ei169'></fp>center<fp class='fp-u2eqi'></fp>>【<a >查询技巧</a>】</td></tr> <tr><td background=<fp class='fp-s7yrb'></fp><fp class='fp-n7ggz'></fp><fp class='fp-2921p'></fp>/<fp class='fp-7gc4d'></fp><fp class='fp-7gc4d'></fp><fp class='fp-tvfth'></fp><fp class='fp-ovwi5'></fp>pic/free<fp class='fp-349v7'></fp><fp class='fp-n7ggz'></fp>gif<fp class='fp-ei169'></fp>> <p align=<fp class='fp-1llyj'></fp>center<fp class='fp-1llyj'></fp>>【<a target=<fp class='fp-s7yrb'></fp>_blank<fp class='fp-ei169'></fp>>软件下载</a>】</td> </tr><tr><td background=<fp class='fp-1llyj'></fp><fp class='fp-x2sy0'></fp><fp class='fp-x2sy0'></fp>/<fp class='fp-7gc4d'></fp><fp class='fp-7gc4d'></fp><fp class='fp-4sqyd'></fp><fp class='fp-dnubq'></fp>pic/lab<fp class='fp-349v7'></fp><fp class='fp-xxrov'></fp>gif<fp class='fp-1llyj'></fp>><p align=<fp class='fp-u2eqi'></fp>center<fp class='fp-1llyj'></fp>>【<a >实验传真</a>】</td></tr><tr><td background=<fp class='fp-u2eqi'></fp><fp class='fp-x2sy0'></fp><fp class='fp-xxrov'></fp>/<fp class='fp-d6c6l'></fp><fp class='fp-d6c6l'></fp><fp class='fp-vqvto'></fp><fp class='fp-dnubq'></fp>pic/mail<fp class='fp-349v7'></fp><fp class='fp-n7ggz'></fp>gif<fp class='fp-s7yrb'></fp>><p align=<fp class='fp-u2eqi'></fp>center<fp class='fp-u2eqi'></fp>>【<a >联系我们</a>】</td></tr></table></div><script language=<fp class='fp-ei169'></fp>javascript<fp class='fp-1llyj'></fp>> IE<fp class='fp-9s99p'></fp>=(document<fp class='fp-xxrov'></fp>all)?<fp class='fp-2gtt2'></fp>:<fp class='fp-vqvto'></fp>if (IE<fp class='fp-9s99p'></fp>)setInterval(<fp class='fp-dzle8'></fp>keepIE(<fp class='fp-u2eqi'></fp>win<fp class='fp-tvfth'></fp><fp class='fp-ei169'></fp><fp class='fp-7zuy8'></fp><fp class='fp-fi9bx'></fp><fp class='fp-tvfth'></fp><fp class='fp-7zuy8'></fp><fp class='fp-2gtt2'></fp><fp class='fp-hu7g9'></fp>)<fp class='fp-dzle8'></fp><fp class='fp-nwoeh'></fp><fp class='fp-uqno0'></fp>) function keepIE(theName<fp class='fp-19tw0'></fp>theWantTop<fp class='fp-nwoeh'></fp>theWantRight) { theRealTop=parseInt(document<fp class='fp-2921p'></fp>body<fp class='fp-2921p'></fp>scrollTop)theTrueTop=theWantTop+theRealTop document<fp class='fp-xxrov'></fp>all[theName]<fp class='fp-2921p'></fp>style<fp class='fp-2921p'></fp>top=theTrueTop theRealRight=parseInt(document<fp class='fp-n7ggz'></fp>body<fp class='fp-xxrov'></fp>scrollRight) theTrueRight=theWantRight+theRealRight document<fp class='fp-n7ggz'></fp>all[theName]<fp class='fp-2921p'></fp>style<fp class='fp-2921p'></fp>Right=theTrueRight}</script></body></html>

[Ctrl+A 全部选择提示你可先修改部分代码再按运行]