js实现跟随
实现跟随效果的方法
在JavaScript中实现跟随效果通常涉及监听鼠标或触摸事件，并动态更新目标元素的位置。以下是几种常见实现方式：
基础鼠标跟随
document.addEventListener('mousemove', (e) => {
const follower = document.getElementById('follower');
follower.style.left = e.clientX + 'px';
follower.style.top = e.clientY + 'px';
});平滑缓动跟随
let posX = 0, posY = 0;
const follower = document.getElementById('follower');
const ease = 0.1;
function animate() {
const dx = (mouseX - posX) * ease;
const dy = (mouseY - posY) * ease;
posX += dx;
posY += dy;
follower.style.transform = `translate(${posX}px, ${posY}px)`;
requestAnimationFrame(animate);
}
let mouseX = 0, mouseY = 0;
document.addEventListener('mousemove', (e) => {
mouseX = e.clientX;
mouseY = e.clientY;
});
animate();元素跟随特定目标
const target = document.getElementById('target');
const follower = document.getElementById('follower');
function updatePosition() {
const rect = target.getBoundingClientRect();
follower.style.left = rect.left + 'px';
follower.style.top = rect.top + 'px';
requestAnimationFrame(updatePosition);
}
updatePosition();跟随滚动位置
window.addEventListener('scroll', () => {
const follower = document.getElementById('follower');
follower.style.top = window.scrollY + 100 + 'px';
});注意事项
- 性能优化：使用
transform代替top/left进行动画，利用硬件加速 - 节流处理：对频繁触发的事件（如mousemove）进行节流控制
- 边界检测：确保跟随元素不会超出可视区域
- 移动端适配：需要同时处理
touchmove事件
扩展功能
- 添加跟随延迟效果
- 实现跟随路径记录
- 添加跟随元素的旋转朝向
- 实现多级跟随（多个元素链式跟随）
以上代码示例可根据具体需求进行调整和组合，实现不同风格的跟随效果。
