实现鼠标靠近时div向光标移动、远离时归位的动效技术咨询

嘿，这个交互效果其实原理挺清晰的，我帮你拆解一下实现步骤，你跟着来就能搞定👇

1. 先搭好基础HTML结构 #

首先我们需要一个容器（用来监听鼠标事件）和要移动的目标div：

<div class="container">
  <div class="moving-box">我是会动的盒子</div>
</div>

2. 配置CSS样式（重点是过渡动画） #

给容器设置合适的范围，同时给目标div加上过渡动画，这是让移动效果丝滑的关键：

.container {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  /* 可选：给容器加个背景，方便观察 */
  background: #f5f5f5;
}

.moving-box {
  width: 120px;
  height: 60px;
  background: #2c3e50;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  /* 初始位置居中 */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  /* 核心：添加过渡动画，让移动/复位更自然 */
  transition: transform 0.3s ease-out;
}

3. JavaScript核心逻辑（实现跟随逻辑） #

这部分是核心，我们要监听鼠标移动，计算鼠标和div的相对位置，然后根据距离判断是移动还是复位：

const container = document.querySelector('.container');
const box = document.querySelector('.moving-box');

// 记录盒子的初始中心位置
const boxInitialX = window.innerWidth / 2;
const boxInitialY = window.innerHeight / 2;
// 触发移动的距离阈值（鼠标进入这个范围才会动）
const triggerDistance = 200;
// 盒子允许移动的最大偏移量（数值越大，移动幅度越大）
const maxOffset = 30;

// 监听容器内的鼠标移动事件
container.addEventListener('mousemove', (e) => {
  // 获取当前鼠标坐标
  const mouseX = e.clientX;
  const mouseY = e.clientY;

  // 计算鼠标与盒子初始中心的水平、垂直距离
  const distanceX = mouseX - boxInitialX;
  const distanceY = mouseY - boxInitialY;
  // 计算鼠标到盒子中心的直线距离
  const straightDistance = Math.sqrt(distanceX ** 2 + distanceY ** 2);

  if (straightDistance < triggerDistance) {
    // 计算偏移比例：距离越近，偏移幅度越大
    const offsetRatio = (triggerDistance - straightDistance) / triggerDistance;
    // 计算X、Y方向的具体偏移量
    const offsetX = (distanceX / straightDistance) * maxOffset * offsetRatio;
    const offsetY = (distanceY / straightDistance) * maxOffset * offsetRatio;

    // 应用偏移到盒子上
    box.style.transform = `translate(-50%, -50%) translate(${offsetX}px, ${offsetY}px)`;
  } else {
    // 鼠标超出阈值范围，盒子复位
    box.style.transform = `translate(-50%, -50%)`;
  }
});

// 鼠标离开容器时，强制复位盒子
container.addEventListener('mouseleave', () => {
  box.style.transform = `translate(-50%, -50%)`;
});

4. 优化小技巧 #

• 你可以调整triggerDistance（触发距离）和maxOffset（最大偏移量）来适配你的需求，比如想要更灵敏的效果，就缩小triggerDistance或者增大maxOffset
• 如果要给多个元素加这个效果，可以把逻辑封装成函数，循环处理每个目标元素
• 想要增强视觉效果的话，可以给盒子加个hover时的缩放或阴影：

.moving-box:hover {
  transform: translate(-50%, -50%) scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

• 复杂场景下可以用requestAnimationFrame替代直接修改样式，让动画更流畅

内容的提问来源于stack exchange，提问作者Noah Bavonese