js实现图片上下浮动

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

通过 CSS 的 @keyframes 和 transform 属性可以实现平滑的上下浮动效果。JavaScript 仅用于动态控制动画的启停或参数调整。

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

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

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

通过 JavaScript 动态控制浮动

使用 requestAnimationFrame 实现更灵活的浮动控制，适合需要实时调整参数的场景。

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

function animate() {
  position += speed * direction;
  if (position > range || position < 0) direction *= -1;
  img.style.transform = `translateY(${position}px)`;
  requestAnimationFrame(animate);
}

animate();

结合 CSS 变量实现可配置浮动

通过 JavaScript 动态修改 CSS 变量，实现运行时调整浮动幅度和速度。

.floating-image {
  animation: float var(--float-duration) ease-in-out infinite;
  --float-range: 20px;
  --float-duration: 3s;
}

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

document.documentElement.style.setProperty('--float-range', '30px');
document.documentElement.style.setProperty('--float-duration', '2s');

使用第三方库实现高级效果

GSAP 等动画库可提供更复杂的浮动效果，如弹性运动或轨迹控制。

gsap.to(".floating-image", {
  y: -20,
  duration: 2,
  repeat: -1,
  yoyo: true,
  ease: "sine.inOut"
});

性能优化建议

对于多元素浮动，优先使用 CSS 方案。需要交互控制的场景可使用 transform 代替 top/bottom 定位以获得硬件加速。动态创建的浮动元素建议使用 CSS 类而非行内样式。