linux社区爱心援助Linux认证系列教程业界动态站务新闻公司招聘网络学院网址大全LPI专题CISCO专题
设为首页
加入收藏
管理团队
JSP  
JAVA  
PERL  
 您的位置:首页 > 开发语言 > JavaScript >
栏目导栏
  php
  JSP
  ASP
  asp.net
  JAVA
  c/c++/c#
  perl
  JavaScript
  Basic
  Delphi
资料搜索
热门文章
·javascript 时间对象的格式化
·去掉字符串前后的空格
·javascript 事件监听机制
·javascript 事件调用顺序
·js刷新框架子页面的七种方法
·JavaScript:替换字符串
·IE下的JScript编程需注意的内存
·用javascript操作word文档
·Javascript中CTRL+回车提交表单
·JS 获取鼠标位置
·javascript判断Email地址是否有
·Javascript中Select的OnChange
·JS实现的滑动展开与折叠效果
·有分页功能的WEB打印
·Javascript实现窗口最大化的严
最新文章
·使用CSS改变表格边框样式
·为网页添加浮动广告
·判断表单中添加是否数字的JS与
·让浏览器状态栏动起来
·使用Javascript制作行间颜色间
·禁止用右键查看源代码
·网页侦测四法
·制作弹出公告窗口
·为网页添加特效
·网页中取消鼠标右键方法大全
·JavaScript 根据屏幕解析度显示
·如何实现浏览器上的右键菜单
·如何制作浮动广告
·让弹出窗口变得“体贴”一些
·JavaScript技巧:让网页自动穿上
Google
 
利用JavaScript和CSS制作浮动menu
[ 作者:  加入时间:2007-11-23 14:53:22  来自:Linux联盟收集整理 ]
随着INTERNET的高速发展,越来越多的人拥有了个人主页,但以往的静态HTML语言,已经不能满足人们的要求。javascript和多层模式表单(Cascading Style Sheet, CSS)的出现使网页更加生动活泼,从而可以获得令人满意的效果。本文以javascript和CSS制作一种浮动菜单的方法为例,来说明其灵活性,同时也是抛砖引玉希望和广大网友共同切磋技术,制作出更好的家页(homepage).当我们浏览一个超过屏幕显示范围的一个页面时,为了回到菜单项,往往需要向上移动滚动条来完成,而使用浮动菜单则省去了这个麻烦,页面上的浮动菜单选项随着你向上或向下浏览页面而自动的移动。但并不是所有的页面都适合浮动菜单的使用,只有在菜单相对较短,在屏幕上可以完整显示;而正文相对较长,在屏幕上不能全部显示,需要拖动滚动条来完成,使用浮动菜单可以取得意想不到的结果。程序如下: XnyLinux联盟
XnyLinux联盟
<html>XnyLinux联盟
<head>XnyLinux联盟
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">XnyLinux联盟
<style type="text/css">XnyLinux联盟
<!-- XnyLinux联盟
A{ text-transform: none; text-decoration: none; color:black}XnyLinux联盟
A:hover{ color:blue; text-decoration:underline;}XnyLinux联盟
-->XnyLinux联盟
</style> XnyLinux联盟
<link href="http://www.webjx.com/templates/webjx/css/style.css" rel="stylesheet" type="text/css" />XnyLinux联盟
<title>利用javascript 和CSS制作浮动menu</title>XnyLinux联盟
</head> XnyLinux联盟
<body bgcolor="#FFFFFF">XnyLinux联盟
<table width="75%" border="0" align="right">XnyLinux联盟
<tr>XnyLinux联盟
<td><font face="楷体_GB2312" size="5" color="#990033">XnyLinux联盟
<b><p align="center"></b></font>利用javascript XnyLinux联盟
和CSS制作浮动menu</td>XnyLinux联盟
</tr>XnyLinux联盟
<tr>XnyLinux联盟
<td><p align="center">网页教学网整理</td>XnyLinux联盟
</tr>XnyLinux联盟
<tr>XnyLinux联盟
<td> 一份名为"HealthCast2010"的全球性医疗保健调查报告XnyLinux联盟
显<p>示,在未来几年时间里互联网将给全球医疗保健工业带来巨大</p>XnyLinux联盟
<p>的变化。调查对象为来自美国、加拿大、英国、澳大利亚、法</p> XnyLinux联盟
<p>国、德国、芬兰、新西兰和西班牙的400位医疗保健工业的资深</p>XnyLinux联盟
<p> ... ... </p>XnyLinux联盟
<p>顾客数量将随在线药店不同而有所差别,但不取决于医疗机构</p>XnyLinux联盟
<p>大小。这将对传统的名牌大医院带来很大的冲击。 </td>XnyLinux联盟
</tr>XnyLinux联盟
</table> XnyLinux联盟
<div id="win0" style="position:absolute; Right:10px; top:10px; width:136px; height:227px; z-index:25">XnyLinux联盟
<table width="99%" border="0">XnyLinux联盟
<tr> XnyLinux联盟
<td background="../9908pic/feature3.gif">XnyLinux联盟
<p align="center">【<a href="../all/news.htm">最 新 消 息</a>】XnyLinux联盟
</td> XnyLinux联盟
</tr> XnyLinux联盟
<tr>XnyLinux联盟
<td background="../9908pic/help3.gif">XnyLinux联盟
<p align="center">【<a href="telmedicine.html">远 程 医 疗</a>】XnyLinux联盟
</td> XnyLinux联盟
</tr> XnyLinux联盟
<tr>XnyLinux联盟
<td background="../9908pic/net3.gif">XnyLinux联盟
<p align="center">【<a href="../all/new.htm">新 品 世 界</a>】XnyLinux联盟
</td>XnyLinux联盟
</tr> XnyLinux联盟
<tr>XnyLinux联盟
<td background="../9908pic/living3.gif"> XnyLinux联盟
<p align="center">【<a href="../all/syberspace-feature.htm"> 生 活 资 源</a>】 XnyLinux联盟
</td>XnyLinux联盟
</tr> XnyLinux联盟
<tr>XnyLinux联盟
<td background="../9908pic/net3.gif"> XnyLinux联盟
<p align="center">【<a href="../all/netware.htm">查 询 技 巧</a>】XnyLinux联盟
</td>XnyLinux联盟
</tr> XnyLinux联盟
<tr>XnyLinux联盟
<td background="../9908pic/free3.gif"> XnyLinux联盟
<p align="center">【<a href="software/index.htm" target="_blank">软 件 下 载</a>】XnyLinux联盟
</td> XnyLinux联盟
</tr>XnyLinux联盟
<tr>XnyLinux联盟
<td background="../9908pic/lab3.gif">XnyLinux联盟
<p align="center">【<a href="../lab/lab.htm">实 验 传 真</a>】XnyLinux联盟
</td>XnyLinux联盟
</tr>XnyLinux联盟
<tr>XnyLinux联盟
<td background="../9908pic/mail3.gif">XnyLinux联盟
<p align="center">【<a href="../all/lianxi.htm">联 系 我 们</a>】XnyLinux联盟
</td>XnyLinux联盟
</tr></table></div>XnyLinux联盟
<script language="javascript"> XnyLinux联盟
IE4=(document.all)?1:0if (IE4)XnyLinux联盟
setInterval('keepIE("win0",10,10)',1) XnyLinux联盟
function keepIE(theName,theWantTop,theWantRight) { theRealTop=parseInt(document.body.scrollTop)XnyLinux联盟
theTrueTop=theWantTop+theRealTop XnyLinux联盟
document.all[theName].style.top=theTrueTop theRealRight=parseInt(document.body.scrollRight) theTrueRight=theWantRight+theRealRight document.all[theName].style.Right=theTrueRight}XnyLinux联盟
</script>XnyLinux联盟
</body>XnyLinux联盟
</html>

  演示效果如下:

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

Linux联盟收集整理 ,转贴请标明原始链接,如有任何疑问欢迎来本站Linux论坛讨论
评论】【加入收藏夹】【 】【打印】【关闭
※ 相关链接
 ·用Javascript使网页图片产生旋转效果  (2007-11-23 14:52:41)
 ·Javascript:window对象的方法  (2007-11-23 14:50:28)
 ·Javascript控制显示表单个数  (2007-11-23 14:49:28)
 ·JavaScript实用的一些技巧  (2007-11-23 14:48:51)
 ·Javascript实现窗口最大化的严格定义  (2007-11-23 14:48:08)
 ·利用Javascript实现对Media Player的控制功能  (2007-11-23 14:46:54)
 ·详解JavaScript对象属性应用  (2007-11-23 14:45:35)
 ·用JavaScript脚本制作自己的色谱图  (2007-11-23 14:45:00)
 ·以一个最简单的例子把OO的JavaScript说明白  (2007-11-23 14:42:29)
 ·Javascript模板技术  (2007-11-23 14:30:26)