jQuery 浮动广告实现代码

营销型网站
2023-12-01 08:05:43

下面是详细讲解“jQuery 浮动广告实现代码”的完整攻略。

概述

在网页设计中，广告是常见的一种元素，而浮动广告就是其中比较常见的一种类型。浮动广告指的是在网页中随着用户的滚动而浮动的广告。在这里，我们介绍一种使用 jQuery 实现浮动广告的方法。

实现步骤

步骤1：编写 HTML 结构

首先我们需要编写 HTML 结构，用来容纳我们的广告。在 HTML 中添加一个 p 元素，它将容纳我们的广告内容。例如：

<p id="floating-ad">
  <!--广告内容-->
</p>

步骤2：设计 CSS 样式

接下来，我们需要编写一些 CSS 样式来使广告固定在浏览器窗口中的某个位置。例如，要使广告固定在浏览器窗口的右下角，可以使用以下样式：

#floating-ad {
  position: fixed;
  bottom: 0;
  right: 0;
  /* 其他样式 */
}

此时，广告已经可以固定在浏览器窗口的右下角，但是我们还需要通过 JavaScript 代码来实现其随着页面的滚动而浮动。

步骤3：写入 jQuery 代码

接下来，我们需要编写 jQuery 代码来实现浮动广告的效果。我们可以使用 jQuery 的 scrollTop() 方法来获取页面的滚动距离，然后根据这个值动态设置广告位置。

$(window).scroll(function() {
  var scrollTop = $(this).scrollTop();
  $('#floating-ad').css({
    'transform': 'translateY(' + scrollTop + 'px)'
  });
});

以上代码的作用是监听浏览器窗口的 scroll 事件，当页面滚动时，获取滚动距离并将其赋值给 translateY 属性，使广告随着页面的滚动而浮动。

示例1：基础的浮动广告

下面，我们看一个基础的浮动广告示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery 浮动广告实现代码 - 基础示例</title>
    <style type="text/css">
      #floating-ad {
        position: fixed;
        bottom: 0;
        right: 0;
        background-color: #f00;
        color: #fff;
        padding: 10px;
        transition: transform .5s;
      }
    </style>
  </head>
  <body>
    <p style="height: 2000px;"></p>
    <p id="floating-ad">浮动广告</p>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript">
      $(window).scroll(function() {
        var scrollTop = $(this).scrollTop();
        $('#floating-ad').css({
          'transform': 'translateY(' + scrollTop + 'px)'
        });
      });
    </script>
  </body>
</html>

在这个示例中，我们简单地实现了一个固定在浏览器窗口右下角的红色背景、白色文字的浮动广告，当页面滚动时，广告会随着页面的滚动而浮动。

示例2：带有渐变效果的浮动广告

下面，我们看另一个示例，它在基础示例的基础上添加了一个渐变效果：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery 浮动广告实现代码 - 带有渐变效果的示例</title>
    <style type="text/css">
      #floating-ad {
        position: fixed;
        bottom: 0;
        right: 0;
        background-image: linear-gradient(to bottom, rgba(255,0,0,0), rgba(255,0,0,1));
        color: #fff;
        padding: 10px;
        transition: transform .5s;
      }
    </style>
  </head>
  <body>
    <p style="height: 2000px;"></p>
    <p id="floating-ad">浮动广告</p>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript">
      $(window).scroll(function() {
        var scrollTop = $(this).scrollTop();
        $('#floating-ad').css({
          'transform': 'translateY(' + scrollTop + 'px)'
        });
      });
    </script>
  </body>
</html>

在这个示例中，我们将背景颜色替换为了一个渐变效果，从而使广告看起来更加生动。在 background-image 属性中，我们使用了 linear-gradient() 函数来定义了渐变的起点和终点，第一个参数表示渐变的方向，这里使用了 to bottom 表示从上到下的垂直渐变。同样，你也可以使用 to left、to right 或者 to top-right 等参数来定义其它的渐变方向。紧接着，我们使用了 rgba() 函数来定义了两种颜色，第一个参数是红色，最后一个参数是透明度，取值范围为 0 到 1，这里透明度为 0 表示渐变的起点为完全透明，透明度为 1 表示渐变的终点为完全不透明。通过这样的组合，我们实现了一个带有渐变效果的浮动广告。