在网页中引入广告是一种常见的商业模式，但过于显眼的广告可能会影响用户体验。因此，实现一个可以自动下拉和收缩的广告效果，既可以展示广告内容，又不会影响用户正常浏览网页。
本文将介绍如何使用原生JavaScript实现这个功能，包括代码实现和详细说明。通过学习这个例子，您将了解到如何运用JavaScript控制DOM元素，并且在实际应用中可以灵活运用这些技能。
实现思路
- 当页面滚动到一定位置时，显示广告。
- 点击关闭按钮，隐藏广告。
- 添加按钮悬浮效果，增强交互体验。
HTML结构
我们假设一个顶部广告栏位于页面的头部。
<div class="banner"> <div class="banner-close">X</div> <!-- 广告内容 --> </div>
其中，.banner 为广告整体容器，.banner-close 为关闭按钮。
CSS样式
对广告进行初始化的CSS样式：
-- -------------------- ---- ------- ------- - ------ ----- ------- -- --------- ------- --------- ------ ---- -- ----- -- ----------- --- ---- ------------ -------- ----- - -------------- - ------- ------ -- ---- -- - ------------- - --------- --------- ---- -- ------ -- -------- ---- ------- -------- -
JavaScript代码
-- -------------------- ---- -------
-- ----
----- ------ - ----------------------------------
----- -------- - ----------------------------------------
-- -----
--- --------------- - ------
-- --------
--------------------------------- -- -- -
----- --------- - ------------------ -- -----------------------------------
-- ---------- -- --- -- ----------------- -
-- -----------------
-------------------------------
--------------- - -----
- ---- -- ---------- - --- -- ---------------- -
-- -------------
----------------------------------
--------------- - ------
-
---
-- -----------
---------------------------------- -- -- -
----------------------------------
--------------- - ------
---首先，我们获取了广告的元素节点和关闭按钮的元素节点。然后，我们初始化一个布尔类型的变量 isBannerVisible 来跟踪广告是否可见。
在滚动事件中，通过 window.pageYOffset || document.documentElement.scrollTop 获取当前页面滚动的高度。当页面滚动到200px时，将广告容器添加 .active 类，从而实现下拉效果。当页面滚动回顶部时，移除 .active 类，隐藏广告。
在点击关闭按钮时，我们同样移除 .active 类，并设置 isBannerVisible 变量为 false。
增强交互体验
我们可以通过CSS和JavaScript来增强交互体验。以下是一个简单的例子：
.banner-close:hover {
background-color: #ddd;
}
.banner:hover {
height: 200px; /* 悬浮高度 */
}当鼠标悬停在关闭按钮上时，背景色会发生变化，提示用户该按钮可以点击。
当鼠标悬停在广告容器上时，容器的高度会扩展到200px，以提供更多的广告展示空间。
总结
在本文中，我们介绍了如何使用原生JavaScript实现网页顶部自动下拉/收缩广告效果。通过学习这个
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/938