用JavaScript写一个浮动的广告

浮动广告是一种常见的网页广告形式，它可以吸引用户的眼球并提高广告的展示率。以下是一个用 JavaScript 实现浮动广告的示例代码：

HTML 代码：

<div id="float-ad">
  <img src="ad.png" alt="浮动广告">
</div>

CSS 代码：

#float-ad {
  position: absolute;
  top: 100px;
  left: 0;
  transition: left 0.5s ease-in-out;
}

JavaScript 代码：

var floatAd = document.getElementById('float-ad');
var adWidth = floatAd.offsetWidth;
var screenWidth = window.innerWidth;

// 设置广告的初始位置
floatAd.style.left = '-' + adWidth + 'px';

// 滚动事件监听
window.addEventListener('scroll', function() {
  var scrollPosition = window.scrollY;
  var adPosition = scrollPosition + 100;

  // 如果广告的位置超出了屏幕外，则隐藏广告
  if (adPosition + adWidth < screenWidth) {
    floatAd.style.left = '-' + adWidth + 'px';
  } else {
    floatAd.style.left = (screenWidth - adPosition) + 'px';
  }
});

上述代码中，我们首先获取了浮动广告的 DOM 元素，并计算了广告的宽度和屏幕的宽度。然后，我们设置了广告的初始位置为屏幕左侧，通过监听滚动事件，不断更新广告的位置，使其跟随滚动条移动。如果广告的位置超出了屏幕外，则隐藏广告。