js实现漂浮
实现漂浮效果的JavaScript方法
使用CSS动画结合JavaScript控制
通过CSS定义关键帧动画，JavaScript动态调整参数实现更灵活的控制。
.float-element {
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}const element = document.querySelector('.float-element');
element.addEventListener('mouseover', () => {
element.style.animationDuration = '1.5s';
});纯JavaScript实现
通过requestAnimationFrame实现平滑的漂浮动画，可精确控制运动轨迹。
let position = 0;
let direction = 1;
const speed = 0.5;
function floatAnimation() {
position += speed * direction;
if (position > 20 || position < 0) direction *= -1;
element.style.transform = `translateY(${position}px)`;
requestAnimationFrame(floatAnimation);
}
floatAnimation();使用物理引擎模拟
引入简单的物理参数使漂浮更自然，适合需要真实感的场景。
let velocity = 0;
const gravity = 0.2;
const bounce = -0.7;
const element = document.getElementById('float-item');
function physicsFloat() {
velocity += gravity;
let topPosition = parseFloat(getComputedStyle(element).top);
if (topPosition > 200) {
topPosition = 200;
velocity *= bounce;
}
element.style.top = (topPosition + velocity) + 'px';
requestAnimationFrame(physicsFloat);
}响应式漂浮控制
根据窗口大小调整漂浮参数，确保不同设备上的显示效果。
function responsiveFloat() {
const maxHeight = window.innerHeight * 0.8;
const amplitude = Math.min(30, maxHeight * 0.1);
element.style.setProperty('--float-height', `${amplitude}px`);
}
window.addEventListener('resize', responsiveFloat);交互式漂浮增强
结合用户交互创建动态漂浮效果，提升用户体验。
let isHovering = false;
const baseSpeed = 3;
const hoverSpeed = 6;
element.addEventListener('mouseenter', () => {
isHovering = true;
updateFloatSpeed();
});
function updateFloatSpeed() {
const currentSpeed = isHovering ? hoverSpeed : baseSpeed;
element.style.animationDuration = `${currentSpeed}s`;
}性能优化技巧
对于多个漂浮元素，使用CSS变量和硬件加速提升性能。
.floater {
will-change: transform;
animation: float var(--float-duration) infinite alternate;
}document.querySelectorAll('.floater').forEach((el, i) => {
el.style.setProperty('--float-duration', `${2 + i * 0.5}s`);
});
