网页中可关闭的漂浮窗口实现可自行调节资源-CSDN文库

155 浏览量 2020-12-10 15:15:53 上传评论收藏 20KB PDF 举报

注释部分为广告的左右调节，可以自行设定代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <title>网页中可关闭的漂浮窗口</title> <meta http-equiv=”content-type” content=”text/html;charset=gb2312″> </hea 网页中的漂浮窗口通常用于显示广告或者其他重要通知，它们会随着用户滚动页面而始终保持在屏幕的某个位置。在这个示例中，我们看到一个可关闭的漂浮窗口的实现，允许用户自行调节窗口的位置，同时也提供了关闭功能。以下是这段代码的核心知识点： 1. **HTML结构**： - `<!DOCTYPE html>` 定义了文档类型为HTML5。 - `<html>` 是HTML文档的根元素。 - `<head>` 包含文档的元数据，如标题和样式表。 - `<title>` 设置网页的标题，在浏览器标签页中显示。 - `<meta>` 元素设置文档的字符编码为`gb2312`，一种中文字符编码。 2. **CSS样式**： - `position:absolute;` 让元素脱离正常文档流，设置绝对定位。 - `z-index:100;` 控制元素的层叠顺序，数值越大，元素越靠前。 - `cursor:hand;` 设置鼠标指针在元素上时的形状，提示用户可以点击。 3. **JavaScript**： - `document.getElementById()` 方法用于获取ID为`ShowAD`的元素，即漂浮窗口。 - `style` 属性可以直接访问和修改元素的样式。 - `setInterval()` 函数周期性地执行指定的函数，这里是每80毫秒调用一次`moveR`函数，使得漂浮窗口跟随滚动条移动。 - `moveR` 函数计算漂浮窗口的新位置，基于浏览器的视口高度和宽度。 - `closead` 函数用于关闭漂浮窗口，将`display`属性设置为`none`，隐藏元素。 4. **事件处理**： - `onClick` 属性绑定点击事件到包含"关闭"文本的`<div>`，当用户点击这个区域时，调用`closead`函数。 - `<a>` 标签链接到 `/jscss/` 并包含一个广告图片。 5. **浏览器兼容性**： - `document.compatMode` 检查浏览器的文档模式，`CSS1Compat` 表示标准模式。 - `bodyfrm` 变量根据浏览器模式获取合适的滚动条位置，兼容不同的浏览器。 6. **调整广告位置**： - 注释部分提到的广告左右调节，可以通过修改`adst.left`的值来实现，但在这个例子中未实际应用。 7. **字符集**： - 使用`gb2312`编码可能不适用于所有中文环境，现代网页更推荐使用`UTF-8`编码以支持更多语言。这个示例提供了一个基础的可关闭漂浮窗口的实现，可以根据需求进行扩展，比如添加动画效果、改变窗口尺寸、调整关闭按钮样式等。同时，为了提高用户体验，应确保漂浮窗口不会过于干扰用户浏览主要内容。

资源推荐

资源评论