用js写一个浮动广告

以下是一个简单的示例，使用 JavaScript 和 CSS 实现一个浮动广告：

HTML 代码：

<div class="floating-ad">
  <a href="#"><img src="path/to/image.jpg" alt="Floating Ad"></a>
  <button class="close-btn">&times;</button>
</div>

CSS 代码：

.floating-ad {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 300px;
  height: 250px;
  border: 1px solid #ccc;
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  z-index: 9999;
}

.close-btn {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 20px;
  height: 20px;
  border: none;
  background-color: #ccc;
  color: #fff;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
}

JavaScript 代码：

// 获取浮动广告元素和关闭按钮元素
const floatingAd = document.querySelector('.floating-ad');
const closeBtn = document.querySelector('.close-btn');

// 关闭按钮点击事件处理程序
closeBtn.addEventListener('click', () => {
  floatingAd.style.display = 'none';
});

// 页面滚动事件处理程序
window.addEventListener('scroll', () => {
  const scrollY = window.scrollY || window.pageYOffset;
  const adBottom = floatingAd.offsetTop + floatingAd.offsetHeight;
  const isAdVisible = adBottom > scrollY && floatingAd.offsetTop < scrollY + window.innerHeight;

  if (isAdVisible) {
    floatingAd.style.visibility = 'visible';
  } else {
    floatingAd.style.visibility = 'hidden';
  }
});

说明：

- `position: fixed` 属性使广告固定在浏览器窗口中。`bottom` 和 `right` 属性设置广告距离窗口底部和右侧的距离。
- 广告元素包含一个图片链接和一个关闭按钮，按钮使用绝对定位使其在广告元素的右上角。
- 当点击关闭按钮时，广告元素的 `display` 属性设置为 `none`，使其消失。
- 当页面滚动时，使用 `window.scrollY` 或 `window.pageYOffset` 获取当前滚动位置。如果广告元素的底部在可见窗口内，则将其 `visibility` 属性设置为 `visible`，否则设置为 `hidden`。