js实现左右两侧浮动广告

2023年6月11日上午10:09 • JavaScript

下面是关于“js实现左右两侧浮动广告”的完整攻略。

实现思路

我们首先需要确定广告层的定位方式，一般采用 position: fixed 来实现固定的效果。然后利用 JS 计算浏览器窗口的宽度，以及广告层的宽度，计算出广告层到浏览器窗口两侧的距离，以此确定广告层的位置。接着，我们需要监听浏览器窗口的 scroll 和 resize 事件，根据滚动的位置和窗口的大小来更新广告层的位置。

示例代码

示例一

下面的代码演示了如何实现一个左侧浮动广告。假设广告的宽度为 200px，这里我们要设置其距离页面左侧为 20px。当用户向下滚动页面时，广告会实时固定在左侧并跟随用户的滚动，当广告超过顶部导航栏时，其距离顶部为 100px。你可以将代码复制到你的 HTML 文件中，运行起来查看效果。

<!DOCTYPE html>
<html>
  <head>
    <title>左侧浮动广告</title>
    <style>
      #left-ad {
        position: fixed;
        left: 20px;
        top: 100px;
        width: 200px;
        background-color: yellow;
        padding: 10px;
      }
      .main-content {
        margin-left: 240px;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div id="left-ad">这是一个左侧浮动广告</div>
    <div class="main-content">
      <h1>网站主体内容</h1>
      <p>这里是主体内容的介绍。</p>
      <!-- 更多主体内容 -->
    </div>
    <script>
      // 计算广告距离浏览器左侧的距离
      var ad = document.getElementById('left-ad');
      var adWidth = ad.offsetWidth; // 广告层的宽度
      var leftDistance = 20; // 广告离浏览器左侧的距离
      var leftPosition = leftDistance - adWidth; // 实际距离浏览器左侧的距离

      // 更新广告层的位置
      function updateAdPosition() {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        var topDistance = 100; // 广告层距离顶部的距离

        // 计算实际距离浏览器两侧的距离
        var left = (window.innerWidth / 2) - (adWidth / 2) + leftPosition;
        var top = scrollTop + topDistance;

        // 更新广告层的位置
        ad.style.left = left + 'px';
        ad.style.top = top + 'px';
      }

      // 监听浏览器滚动和窗口大小改变事件
      window.addEventListener('scroll', updateAdPosition);
      window.addEventListener('resize', updateAdPosition);

      // 初始化广告层位置
      updateAdPosition();
    </script>
  </body>
</html>

示例二

下面的代码演示了如何实现一个右侧浮动广告。假设广告的宽度也为 200px，这里我们要设置其距离页面右侧为 20px。当用户向下滚动页面时，广告会实时固定在右侧并跟随用户的滚动，当广告超过底部导航栏时，其距离底部为 100px。

<!DOCTYPE html>
<html>
  <head>
    <title>右侧浮动广告</title>
    <style>
      #right-ad {
        position: fixed;
        right: 20px;
        bottom: 100px;
        width: 200px;
        background-color: yellow;
        padding: 10px;
      }
      .main-content {
        margin-right: 240px;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div id="right-ad">这是一个右侧浮动广告</div>
    <div class="main-content">
      <h1>网站主体内容</h1>
      <p>这里是主体内容的介绍。</p>
      <!-- 更多主体内容 -->
    </div>
    <script>
      // 计算广告距离浏览器右侧的距离
      var ad = document.getElementById('right-ad');
      var adWidth = ad.offsetWidth; // 广告层的宽度
      var rightDistance = 20; // 广告离浏览器右侧的距离
      var rightPosition = rightDistance - adWidth; // 实际距离浏览器右侧的距离

      // 更新广告层的位置
      function updateAdPosition() {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        var topDistance = 100; // 广告层距离底部的距离

        // 计算实际距离浏览器两侧的距离
        var right = (window.innerWidth / 2) - (adWidth / 2) + rightPosition;
        var bottom = scrollTop + window.innerHeight - topDistance - ad.offsetHeight;

        // 更新广告层的位置
        ad.style.right = right + 'px';
        ad.style.bottom = bottom + 'px';
      }

      // 监听浏览器滚动和窗口大小改变事件
      window.addEventListener('scroll', updateAdPosition);
      window.addEventListener('resize', updateAdPosition);

      // 初始化广告层位置
      updateAdPosition();
    </script>
  </body>
</html>

以上就是实现左右两侧浮动广告的完整攻略，希望对你有所帮助！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现左右两侧浮动广告 - Python技术站