JavaScript实现窗口浮动广告代码示例

"窗口浮动代码实现广告跟随滚动效果" 在网页设计中，经常需要实现一种广告或提示信息随着用户滚动页面而浮动的效果，这种效果通常被称为“窗口浮动”或“广告浮动”。给定的代码示例就是实现这一功能的一个简单JavaScript脚本。下面将详细解析这个代码的工作原理和关键知识点。 首先，变量`advtop`被初始化为0，它用来存储广告层（advLayer）距离页面顶部的初始像素值。这是在页面加载时计算并赋值的，确保了广告层的位置能够正确跟踪页面的滚动。 函数`inix()`是页面加载后的初始化函数。它通过`document.getElementById("advLayer")`获取ID为`advLayer`的DOM元素，然后通过`.style.pixelTop`属性获取该元素距离顶部的像素值，并将其赋值给`advtop`。这一步是关键，因为它记录了广告层在页面未滚动时的位置。 接着是`move()`函数，它的作用是在用户滚动页面时更新广告层的位置。通过`document.body.scrollTop`获取当前页面滚动条的垂直偏移量，然后将这个偏移量加上`advtop`的值，再设置给`advLayer`的`pixelTop`属性，使得广告层相对于页面顶部保持固定位置。 `closeMe()`函数用于关闭广告层。当用户点击ID为`closeLayer`的关闭按钮时，此函数会被调用，通过改变`advLayer`和`closeLayer`的`display`属性为`none`，使这两个元素在页面上不可见，达到关闭广告的效果。 最后，`window.onscroll=move;`将`move()`函数绑定到窗口的滚动事件上，这样每当用户滚动页面时，`move()`函数都会自动执行，实现了广告随滚动的效果。 在HTML部分，可以看到`<DIV id="closeLayer"`定义了一个关闭按钮，它被设置为绝对定位，并且在页面右侧40px，顶部80px的位置。`<DIV id="advLayer"`则定义了广告层，同样为绝对定位，位于页面右侧30px，顶部100px，且有一个指定的宽度和高度。 这段代码通过JavaScript实现了广告的浮动效果，当用户滚动页面时，广告会始终保持在屏幕的某个固定位置，直到用户选择关闭它。这样的设计既不会干扰用户的主要浏览内容，又能确保广告的可见性。