当前位置：首页 > JavaScript

js实现图片上下浮动

2026-01-31 05:29:03JavaScript

使用 CSS 动画实现图片上下浮动

通过 CSS 的 @keyframes 和 animation 属性可以实现图片上下浮动的效果。这种方法性能较好，适合简单的动画需求。

.floating-image {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

<img src="your-image.jpg" class="floating-image">

使用 JavaScript 实现更复杂的浮动效果

如果需要更复杂的控制，可以使用 JavaScript 动态改变图片的位置。以下是一个使用 requestAnimationFrame 的实现方式：

const image = document.querySelector('.floating-image');
let position = 0;
let direction = 1;
const speed = 0.05;
const range = 20;

function floatImage() {
  position += speed * direction;

  if (position > range || position < -range) {
    direction *= -1;
  }

  image.style.transform = `translateY(${position}px)`;
  requestAnimationFrame(floatImage);
}

floatImage();

添加缓动效果增强动画自然感

为了使浮动更加自然，可以添加正弦函数的缓动效果：

const image = document.querySelector('.floating-image');
let time = 0;
const speed = 0.01;
const range = 20;

function floatImage() {
  time += speed;
  const position = Math.sin(time) * range;

  image.style.transform = `translateY(${position}px)`;
  requestAnimationFrame(floatImage);
}

floatImage();

响应式浮动效果

可以根据窗口大小调整浮动幅度：

const image = document.querySelector('.floating-image');
let time = 0;
const speed = 0.01;

function getRange() {
  return window.innerHeight * 0.05; // 浮动范围为视口高度的5%
}

function floatImage() {
  time += speed;
  const position = Math.sin(time) * getRange();

  image.style.transform = `translateY(${position}px)`;
  requestAnimationFrame(floatImage);
}

window.addEventListener('resize', () => {
  // 窗口大小改变时重新计算浮动范围
});

floatImage();

多图片不同步浮动效果

如果需要多个图片以不同速度浮动：

js实现图片上下浮动

const images = document.querySelectorAll('.floating-image');

images.forEach((img, index) => {
  let time = index * 0.5; // 每个图片不同的起始时间
  const speed = 0.01 + index * 0.002; // 每个图片不同的速度
  const range = 15 + index * 5; // 每个图片不同的浮动范围

  function floatImage() {
    time += speed;
    const position = Math.sin(time) * range;

    img.style.transform = `translateY(${position}px)`;
    requestAnimationFrame(floatImage);
  }

  floatImage();
});

以上方法可以根据具体需求选择使用，CSS 动画适合简单场景，JavaScript 实现则提供更多控制和灵活性。