跳转到主要内容

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

当您初次登录到 developerWorks 时,将会为您创建一份概要信息。您在 developerWorks 概要信息中选择公开的信息将公开显示给其他人,但您可以随时修改这些信息的显示状态。您的姓名(除非选择隐藏)和昵称将和您在 developerWorks 发布的内容一同显示。

所有提交的信息确保安全。

  • 关闭 [x]

当您初次登录到 developerWorks 时,将会为您创建一份概要信息,您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的,并且出于隐私保护的原因,不能是您的电子邮件地址。

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

所有提交的信息确保安全。

  • 关闭 [x]

JavaScript 浮动对象

Nicholas Chase (nicholas@nicholaschase.com), 作家,网站开发人员
Nicholas Chase 曾经参与多家公司的网站开发,包括 Lucent Technologies、Sun Microsystems、Oracle 和 Tampa Bay Buccaneers。Nick 曾经做过高中物理教师、低放射性废弃设备管理员、在线科幻杂志的编辑、多媒体工程师和 Oracle 教员。最近,他担任了佛罗里达 Clearwater 的 Site Dynamics Interactive Communications 的首席技术官。他出版了三部关于 Web 开发的著作,包括 Java and XML From Scratch(Que)。他善于倾听读者的意见,可以通过 nicholas@nicholaschase.com 联系他。

简介:  您一定见过浮动在浏览器角落的内容吧?无论是滚动页面,还是调整窗口大小,内容都会一直出现在这个角落。本教程讲解如何在页面上创建跨浏览器的浮动内容,以及如何调整它的位置。

发布日期:  2008 年 7 月 18 日 (最初发布 2001 年 12 月 20 日)
级别: 初级

访问情况 : 4208 次浏览
评论: 

开始之前

关于本教程

本教程向 Web 开发人员讲解如何创建图像和菜单等浮动对象,也就是说,当用户滚动窗口或调整窗口大小时,这些内容会保持其在浏览器窗口中的某个位置。

Web 上出现的第一种浮动对象可能是放在浏览器顶部或底部角落的水印,用来作为 Geocities 等 Web 社区的标志。这些标志一般是半透明的,不是很明显,但是对于没有见过不随页面滚动的对象的用户来说,这种效果很新奇。

目标

目前,可以用 JavaScript 在浏览器中实现相同的效果 —— 创建内容、把它放在页面上并在用户滚动窗口或调整页面大小时控制其位置。本教程介绍了创建可用于 Netscape(4.x 和 6.x)和 Microsoft Internet Explorer(5.x 和 6.x)浏览器的浮动内容所需的过程。

另外,本教程还要演示 Internet Explorer 用户如何重新定位浮动内容,在滚动页面或调整页面大小时让它的新位置保持不变。

先决条件

您应该熟悉 HTML 和 JavaScript。了解动态定位和对象会有帮助,但不是必需的;本教程会介绍相关的基础知识(关于这些主题的更多信息参见本教程末尾的 参考资料)。

系统需求

本教程提供了大量示例代码片段来解释讨论的概念。使用这些示例需要:

  • 一个文本编辑器:HTML 页面和其中的 JavaScript 都是简单的文本。只需要文本编辑器就可以创建和阅读这些代码。
  • 任何支持用 JavaScript 进行动态定位的浏览器:包括 Netscape Navigator 4.7x 和 6.1 以及 Microsoft Internet Explorer 5.5。注意,尽管本教程讨论的浮动内容可以在以上三种浏览器中起作用,但是只能在 IE 5.5 中重新定位。

1 页,共 9 | 后一页

评论



static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Web development
ArticleID=319958
TutorialTitle=JavaScript 浮动对象
publish-date=07182008
author1-email=nicholas@nicholaschase.com
author1-email-cc=

标签

Help
使用 搜索 文本框在 My developerWorks 中查找包含该标签的所有内容。

使用 滑动条 调节标签的数量。

热门标签 显示了特定专区最受欢迎的标签(例如 Java technology,Linux,WebSphere)。

我的标签 显示了特定专区您标记的标签(例如 Java technology,Linux,WebSphere)。

使用搜索文本框在 My developerWorks 中查找包含该标签的所有内容。热门标签 显示了特定专区最受欢迎的标签(例如 Java technology,Linux,WebSphere)。我的标签 显示了特定专区您标记的标签(例如 Java technology,Linux,WebSphere)。