熱點推薦：
您现在的位置： 電腦知識網 >> 編程 >> Java編程 >> Javascript >> 正文

利用JavaScript和CSS制作浮動menu

2022-06-13   來源: Javascript 

　　隨著INTERNET的高速發展越來越多的人擁有了個人主頁但以往的靜態HTML語言已經不能滿足人們的要求javascript和多層模式表單（Cascading Style Sheet CSS）的出現使網頁更加生動活潑從而可以獲得令人滿意的效果本文以javascript和CSS制作一種浮動菜單的方法為例來說明其靈活性同時也是拋磚引玉希望和廣大網友共同切磋技術制作出更好的家頁（homepage）當我們浏覽一個超過屏幕顯示范圍的一個頁面時為了回到菜單項往往需要向上移動滾動條來完成而使用浮動菜單則省去了這個麻煩頁面上的浮動菜單選項隨著你向上或向下浏覽頁面而自動的移動但並不是所有的頁面都適合浮動菜單的使用只有在菜單相對較短在屏幕上可以完整顯示而正文相對較長在屏幕上不能全部顯示需要拖動滾動條來完成使用浮動菜單可以取得意想不到的結果程序如下

<html>
<head>
<meta httpequiv=ContentType content=text/html; charset=gb>
<style type=text/css>
<!
A{ texttransform: none; textdecoration: none; color:black}
A:hover{ color:blue; textdecoration:underline;}
>
</style>
<link stylesheet type=text/css />
<title>利用javascript 和CSS制作浮動menu</title>
</head>
<body bgcolor=#FFFFFF>
<table width=% border= align=right>
<tr>
<td><font face=楷體_GB size= color=#>
<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>顧客數量將隨在線藥店不同而有所差別但不取決於醫療機構</p>
<p>大小這將對傳統的名牌大醫院帶來很大的沖擊 </td>
</tr>
</table>
<div id=win >
<table width=% border=>
<tr>
<td background=/pic/featuregif>
<p align=center>【<a >最 新 消 息</a>】
</td>
</tr>
<tr>
<td background=/pic/helpgif>
<p align=center>【<a >遠 程 醫 療</a>】
</td>
</tr>
<tr>
<td background=/pic/netgif>
<p align=center>【<a >新 品 世 界</a>】
</td>
</tr>
<tr>
<td background=/pic/livinggif>
<p align=center>【<a > 生 活 資 源</a>】
</td>
</tr>
<tr>
<td background=/pic/netgif>
<p align=center>【<a >查 詢 技 巧</a>】
</td>
</tr>
<tr>
<td background=/pic/freegif>
<p align=center>【<a target=_blank>軟 件 下 載</a>】
</td>
</tr>
<tr>
<td background=/pic/labgif>
<p align=center>【<a >實 驗 傳 真</a>】
</td>
</tr>
<tr>
<td background=/pic/mailgif>
<p align=center>【<a >聯 系 我 們</a>】
</td>
</tr></table></div>
<script language=javascript>
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>

　　演示效果如下

　　

　　    [Ctrl+A 全部選擇 提示你可先修改部分代碼再按運行]


From:http://tw.wingwit.com/Article/program/Java/Javascript/201311/25311.html
    《利用JavaScript和CSS制作浮動menu》本文是由Javascript免費提供，內容來源於互聯網,本文歸原作者所有。
  • 上一篇文章：

  • 下一篇文章：
    • 相關文章
    主板 CPU 硬盤 內存 顯卡 聲卡 顯示器 光驅 死機
    推薦文章
    Copyright © 2005-2022 電腦知識網 Computer Knowledge   All rights reserved.