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技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • 如何用JavaScipt测网速

    如何用JavaScript测网速 测量网速对于网站的优化和性能提升很重要,本文将介绍如何使用JavaScript测量网速。 计算下载速度 通过测量一段时间内下载的数据大小和时间来计算下载速度。我们可以使用XMLHttpRequest对象来进行下载,以下是代码示例: function measureDownloadSpeed(url, duration) { …

    JavaScript 2023年6月11日
    00
  • javascript基础知识整理

    JavaScript 基础知识整理 简介 JavaScript 是一种轻量级的脚本语言,用于为网站添加交互性和响应式。它被广泛用于前端开发、后端开发以及移动应用程序开发。 本篇文章将对 JavaScript 的基础知识进行整理,希望可以让初学者快速掌握 JavaScript 的核心概念。 数据类型 JavaScript 中有七种基本数据类型:undefine…

    JavaScript 2023年5月27日
    00
  • js定时器的使用(实例讲解)

    JS定时器是一种常见的编程工具,可以用于在一定时间间隔内执行一些具体的操作或调用某一函数。使用JS定时器,可以增强网站的交互性和用户体验度。 下面,我们来详细讲解JS定时器的使用步骤和实例讲解。 步骤一:设置定时器 在JavaScript中,使用setInterval()方法可以创建一个定时器。这个方法有两个参数:要运行的函数名和定时器开始运行的时间间隔(单…

    JavaScript 2023年5月27日
    00
  • js中关于Blob对象的介绍与使用

    什么是 Blob 对象 Blob 对象是 JavaScript 中的一个标准对象,它代表了一段二进制数据。通常我们会用它来存储二进制文件,比如图片、视频、音频等等。 在 JavaScript 中,我们可以使用 Blob 构造函数来创建一个 Blob 对象。它接受一个数组作为参数,数组元素可以是字符串、 ArrayBuffer 对象(用于表示二进制数据) 或 …

    JavaScript 2023年5月27日
    00
  • 细说javascript函数从函数的构成开始

    细说JavaScript函数从函数的构成开始 JavaScript 函数是程序中的基础组件之一。在本文中,我们将深入了解 JavaScript 函数,包括函数的构成、参数传递和作为值的函数等。 函数的构成 JavaScript 函数由函数名称、参数列表、函数体和返回值组成。下面是一个最简单的 JavaScript 函数示例: function sayHell…

    JavaScript 2023年5月27日
    00
  • js浮点数精确计算(加、减、乘、除)

    下面是js浮点数精确计算的完整攻略: 问题描述 在JavaScript中对浮点数进行计算时,由于采用 IEEE 754 标准,浮点数会存在精度误差。例如: 0.1 + 0.2 // 返回0.30000000000000004 而不是我们期望的 0.3。这种精度误差可能会在一些需要精确计算的场景下带来问题。本文将介绍如何使用JavaScript实现浮点数的精确…

    JavaScript 2023年6月10日
    00
  • 激活 ActiveX 控件

    激活 ActiveX 控件是通过在 HTML 页面使用OBJECT标签来实现的。下面是激活ActiveX 控件的完整攻略: 第一步:编写 OBJECT 标签 在 HTML 页面中使用 OBJECT 标签来激活 ActiveX 控件 <object id="控件ID" classid="clsid:控件ClassID&quo…

    JavaScript 2023年6月10日
    00
  • 判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解

    接下来我将详细讲解“判断js中各种数据的类型方法之typeof与Object.prototype.toString讲解”。 typeof与Object.prototype.toString的差别 在 Javascript 中,判断一个值的类型通常使用 typeof 操作符和 Object.prototype.toString 方法,二者在实际开发中常常被用来…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部