当前位置：首页 > JavaScript

js实现漂浮

2026-04-04 02:32:00JavaScript

实现漂浮效果的JavaScript方法

使用CSS动画结合JavaScript控制 通过CSS定义关键帧动画，JavaScript动态添加类名或调整样式属性实现漂浮效果。CSS部分定义浮动轨迹，JavaScript控制触发时机或参数。

js实现漂浮

.float-animation {
    animation: float 3s ease-in-out infinite;
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

const element = document.getElementById('target');
element.classList.add('float-animation');

通过requestAnimationFrame实现手动控制 利用时间函数计算偏移量，实现更灵活的漂浮控制。适合需要动态调整参数或复杂路径的场景。

js实现漂浮

let startTime = null;
function float(timestamp) {
    if (!startTime) startTime = timestamp;
    const progress = (timestamp - startTime) / 1000;
    const offset = Math.sin(progress * 2) * 15;
    element.style.transform = `translateY(${offset}px)`;
    requestAnimationFrame(float);
}
requestAnimationFrame(float);

物理模拟实现自然漂浮 加入加速度和阻尼系数模拟真实物理效果。通过速度变量和位置更新公式，创造更自然的浮动轨迹。

let position = 0;
let velocity = 0;
const stiffness = 0.1;
const damping = 0.8;

function physicsFloat() {
    const acceleration = -position * stiffness - velocity * damping;
    velocity += acceleration * 0.016;
    position += velocity * 0.016;
    element.style.transform = `translateY(${position}px)`;
    requestAnimationFrame(physicsFloat);
}
physicsFloat();

结合鼠标交互的漂浮效果 根据鼠标位置动态调整漂浮幅度或方向，增加交互性。通过事件监听获取鼠标坐标，计算元素响应偏移。

document.addEventListener('mousemove', (e) => {
    const xRatio = e.clientX / window.innerWidth - 0.5;
    const yRatio = e.clientY / window.innerHeight - 0.5;
    element.style.transform = `
        translateX(${xRatio * 30}px)
        translateY(${yRatio * 30}px)
    `;
});