JavaScript 浮动对象

级别： 初级

Nicholas Chase (nicholas@nicholaschase.com), 作家，网站开发人员

2001 年 12 月 20 日
2008 年 7 月 18 日 更新

	现在注册或者使用您的 IBM ID 和密码登录。

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

在本教程中

本教程向 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 小时

格式

回页首