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

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

一、代码实现思路

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

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

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

二、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>

六、示例说明

在以上代码实现过程中，我们左右弹性滚动对联广告的实现方法是基于浏览器窗口宽度来展示广告位置的。因此，当浏览器窗口尺寸发生变化时，广告的位置会相应发生改变。

举个例子，当我们在浏览器窗口尺寸大于 1200px 时，本示例中的广告会分别固定在浏览器窗口左右两侧。而当浏览器窗口尺寸小于 1200px 时，广告呈现在居中位置，并能够随着页面的滚动而左右滑动。