利用JavaScript和CSS製作浮動menu

來源:互聯網
上載者:User
css|javascript|浮動

隨著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>
<link href="http://www.webjx.com/templates/webjx/css/style.css" rel="stylesheet" type="text/css" />
<title>利用javascript 和CSS製作浮動menu</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>

  示範效果如下:

<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> <link href="http://www.webjx.com/templates/webjx/css/style.css" rel="stylesheet" type="text/css" /><title>利用javascript 和CSS製作浮動menu</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>

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



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。