js左右弹性滚动对联广告代码分享

2023年6月11日下午1:59 • JavaScript

下面是 js 左右弹性滚动对联广告代码分享的攻略：

一、代码实现思路

实现 js 左右弹性滚动对联广告的代码，整体思路如下：

使用 CSS 布局将广告左右对联
使用 JavaScript 监测浏览器窗口大小，以动态设置广告左右对联的位置
实现左右弹性滚动效果，让广告在页面上滑动

下面将分别讲解具体的实现过程。

二、HTML 结构

首先需要在 HTML 文件中添加必要的代码结构。对于左右对联广告，一般采用以下 HTML 结构：

<div class="ad-wrap">
  <div class="ad ad-left">
    <!-- 左边广告 -->
  </div>
  <div class="ad ad-right">
    <!-- 右边广告 -->
  </div>
</div>

其中，使用 .ad-wrap 进行整个广告的包裹，使用 .ad 分别设置左右两边广告。

三、CSS 样式设置

接下来，需要对广告的 CSS 样式进行设置：

.ad-wrap {
  position: fixed;
  z-index: 99999;
  width: 100%;
  height: 100%;
}

.ad {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 300px; /* 设置广告宽度 */
  height: 100%;
  background-color: #eee; /* 设置广告背景色 */
}

.ad-left {
  left: -300px; /* 初始左广告位置为负值，隐藏在左边 */
}
.ad-right {
  right: -300px; /* 初始右广告位置为负值，隐藏在右边 */
}

如上述代码所示，给 .ad-wrap 和 .ad 分别设置了必要的 CSS 属性，包括 position、z-index、width、height 等。

其中，.ad-left 和 .ad-right 分别设置了初始位置，将广告隐藏在浏览器左、右侧。

四、JavaScript 设置

接下来，我们需要使用 JavaScript 监测浏览器窗口大小，以动态设置广告左右对联的位置。

function setAdPosition() {
  var windowWidth = window.innerWidth; // 获取浏览器当前宽度
  var adWrap = document.querySelector('.ad-wrap');
  var adLeft = document.querySelector('.ad-left');
  var adRight = document.querySelector('.ad-right');

  // 设置左边广告位置
  adLeft.style.left = -adLeft.offsetWidth + 'px';

  // 设置右边广告位置
  adRight.style.right = -adRight.offsetWidth + 'px';

  // 按照浏览器宽度设置广告的距离
  if (windowWidth > 1200) {
    adLeft.style.left = '0';
    adRight.style.right = '0';
  } else {
    adLeft.style.left = '50%';
    adRight.style.right = '50%';
  }
}

如上述代码所示，我们使用 querySelector 方法获取必要的 DOM 元素，并根据浏览器的宽度动态设置广告的位置。

在设置完广告位置后，我们接下来需要使用 JavaScript 实现左右弹性滚动效果。

function setAdPosition() {
  // 省略已有代码...

  // 滚动事件监听
  window.onscroll = function() {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    // 设置广告位置
    adLeft.style.top = scrollTop + 'px';
    adRight.style.top = scrollTop + 'px';
  }
}

如上述代码所示，我们使用 onscroll 方法监听滚动事件，动态计算广告的 top 值，并设置广告的位置即可。

五、最终代码

在以上实现步骤完成后，我们将所有必要的代码整合起来即可实现 js 左右弹性滚动对联广告。下面是最终完整代码实例：

<div class="ad-wrap">
  <div class="ad ad-left">
    <!-- 左边广告 -->
  </div>
  <div class="ad ad-right">
    <!-- 右边广告 -->
  </div>
</div>

<style>
.ad-wrap {
  position: fixed;
  z-index: 99999;
  width: 100%;
  height: 100%;
}
.ad {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 300px;
  height: 100%;
  background-color: #eee;
}
.ad-left {
  left: -300px;
}
.ad-right {
  right: -300px;
}
</style>

<script>
function setAdPosition() {
  var windowWidth = window.innerWidth;
  var adWrap = document.querySelector('.ad-wrap');
  var adLeft = document.querySelector('.ad-left');
  var adRight = document.querySelector('.ad-right');

  adLeft.style.left = -adLeft.offsetWidth + 'px';
  adRight.style.right = -adRight.offsetWidth + 'px';

  if (windowWidth > 1200) {
    adLeft.style.left = '0';
    adRight.style.right = '0';
  } else {
    adLeft.style.left = '50%';
    adRight.style.right = '50%';
  }

  // 滚动事件监听
  window.onscroll = function() {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    adLeft.style.top = scrollTop + 'px';
    adRight.style.top = scrollTop + 'px';
  }
}

// 初始化
setAdPosition();

// 浏览器窗口尺寸改变事件监听
window.onresize = function() {
  setAdPosition();
}
</script>