JavaScript实现广告弹窗效果

2023年6月11日上午9:56 • JavaScript

JavaScript实现广告弹窗效果的攻略包含以下几个步骤：

1. 创建HTML结构

我们需要为广告弹窗准备一个HTML结构，可以在页面中创建一个div元素，然后在其中嵌套一个img标签和一个关闭按钮元素。其中，img标签的src属性设置为我们需要展示的广告图片地址。例如：

<div id="ad">
  <img src="https://example.com/ad.jpg" alt="广告图片">
  <button id="close-btn">关闭</button>
</div>

2. 样式定义

接下来，我们需要为广告弹窗定义样式。对于广告容器，我们需要设置其宽高、背景颜色、边框样式等样式；对于广告图片和关闭按钮，我们需要设置其位置、大小、对齐等样式。例如：

#ad {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -250px;
  width: 500px;
  height: 300px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

#ad img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 100%;
}

#ad #close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: transparent;
  border: none;
  font-size: 16px;
  cursor: pointer;
}

3. JS代码实现

接下来，我们需要编写JavaScript代码实现广告弹窗的弹出和关闭功能。当页面加载完成后，我们需要为关闭按钮添加点击事件，点击时隐藏广告弹窗；同时，我们可以设置一个计数器，在页面加载完成后一定时间后弹出广告弹窗。例如：

window.addEventListener('load', function() {
  var ad = document.getElementById('ad');
  var closeBtn = document.getElementById('close-btn');

  // 添加关闭按钮点击事件
  closeBtn.addEventListener('click', function() {
    ad.style.display = 'none';
  });

  // 定时弹出广告窗口
  setTimeout(function() {
    ad.style.display = 'block';
  }, 5000); // 5秒后弹出
});

示例说明

示例1：定时弹窗

参考以上步骤，我们可以实现一个定时弹出广告窗口的效果。当页面加载完成后，5秒钟后弹出广告窗口。实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>广告弹窗示例1</title>
  <style>
    #ad {
      position: fixed;
      top: 50%;
      left: 50%;
      margin-top: -150px;
      margin-left: -250px;
      width: 500px;
      height: 300px;
      background-color: #fff;
      border: 1px solid #ccc;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      z-index: 9999;
    }

    #ad img {
      display: block;
      margin: 0 auto;
      max-width: 100%;
      max-height: 100%;
    }

    #ad #close-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      background-color: transparent;
      border: none;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="ad">
    <img src="https://picsum.photos/id/1020/500/300" alt="广告图片">
    <button id="close-btn">关闭</button>
  </div>
  <script>
    window.addEventListener('load', function() {
      var ad = document.getElementById('ad');
      var closeBtn = document.getElementById('close-btn');

      // 添加关闭按钮点击事件
      closeBtn.addEventListener('click', function() {
        ad.style.display = 'none';
      });

      // 定时弹出广告窗口
      setTimeout(function() {
        ad.style.display = 'block';
      }, 5000); // 5秒后弹出
    });
  </script>
</body>
</html>

示例2：滑动弹窗

除了定时弹窗之外，我们还可以实现滑动弹窗的效果。具体实现方式是：当用户浏览页面超过一定高度后，弹出广告窗口，并从屏幕顶部滑动进入，同时添加动画效果。实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>广告弹窗示例2</title>
  <style>
    #ad {
      position: fixed;
      top: -400px; /* 将广告区域的top设置为负值，使其在屏幕外 */
      left: 50%;
      margin-left: -250px;
      width: 500px;
      height: 300px;
      background-color: #fff;
      border: 1px solid #ccc;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      z-index: 9999;
      overflow: hidden; /* 隐藏广告内容 */
    }

    #ad img {
      display: block;
      margin: 0 auto;
      max-width: 100%;
      max-height: 100%;
    }

    #ad #close-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      background-color: transparent;
      border: none;
      font-size: 16px;
      cursor: pointer;
    }

    /* 添加动画效果 */
    @keyframes ad-slide-in {
      0% { transform: translateY(-400px); }
      100% { transform: translateY(0); }
    }
  </style>
</head>
<body>
  <!-- 页面内容 -->
  <div style="height: 2000px;"></div>

  <!-- 广告弹窗 -->
  <div id="ad">
    <img src="https://picsum.photos/id/1020/500/300" alt="广告图片">
    <button id="close-btn">关闭</button>
  </div>

  <script>
    window.addEventListener('scroll', function() {
      var ad = document.getElementById('ad');
      var closeBtn = document.getElementById('close-btn');

      // 当滑动高度超过一定值后，弹出广告窗口
      if (window.pageYOffset > 500) {
        ad.style.display = 'block';
        setTimeout(function() {
          ad.style.overflow = 'auto'; // 显示广告内容
          ad.style.animation = 'ad-slide-in 1s forwards'; // 添加动画效果
        }, 100);
      }

      // 添加关闭按钮点击事件
      closeBtn.addEventListener('click', function() {
        ad.style.display = 'none';
      });
    });
  </script>
</body>
</html>

在这个示例中，我们通过监听页面滚动事件，当页面滚动到一定高度时弹出广告窗口，并通过CSS3动画实现了广告的滑动效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript实现广告弹窗效果 - Python技术站