js实现图片漂浮广告

下面是一个简单的示例，使用 JavaScript 实现图片漂浮广告效果：

HTML:

<div id="ad-container">
  <img src="ad-image.jpg" id="ad-image" alt="Advertisement">
</div>
 

CSS:

#ad-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#ad-image {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  border-radius: 50%;
  cursor: pointer;
}
 

JavaScript:

var adImage = document.getElementById('ad-image');
var container = document.getElementById('ad-container');

var containerWidth = container.offsetWidth;
var containerHeight = container.offsetHeight;

var maxLeft = containerWidth - adImage.offsetWidth;
var maxTop = containerHeight - adImage.offsetHeight;

var directionX = 1;
var directionY = 1;

function moveAd() {
  var currentLeft = parseInt(adImage.style.left) || 0;
  var currentTop = parseInt(adImage.style.top) || 0;

  if (currentLeft >= maxLeft || currentLeft <= 0) {
    directionX *= -1;
  }

  if (currentTop >= maxTop || currentTop <= 0) {
    directionY *= -1;
  }

  var newLeft = currentLeft + directionX;
  var newTop = currentTop + directionY;

  adImage.style.left = newLeft + 'px';
  adImage.style.top = newTop + 'px';
}

setInterval(moveAd, 10);
 

在这个示例中，ad-container 是广告容器，ad-image 是要漂浮的图片。containerWidth 和 containerHeight 分别表示广告容器的宽度和高度。

maxLeft 和 maxTop 分别是图片能够移动的最大距离。

directionX 和 directionY 用于控制图片的移动方向。初始值为 1，表示向右和向下移动。

moveAd 函数用于移动图片。首先获取当前图片的左边和顶部位置，然后根据最大距离和移动方向计算新的左边和顶部位置，然后将其赋值给图片的 left 和 top 样式属性。

使用 setInterval 函数每隔 10 毫秒调用一次 moveAd 函数，实现连续的移动效果。