一、效果简介

网页制作中包含的效果千奇百怪，但这些效果无一例外都是为了让页面展示更好的交互效果。长沙网站建设今天展示的是一种按钮吸附功能，在鼠标移动到按钮周围时，原本在原地不动的按钮会自动吸附过来，不仅能让客户更快的完成点击，这种新奇的体验也能让他眼前一亮。

上为效果图，鼠标移动到按钮左侧时，按钮已经吸附过来

二、实现步骤

一般页面上的按钮都是固定的，想点击就必须将鼠标移动到那里。而长沙网站制作通过Js将按钮增加了“吸附”效果。在鼠标移动到按钮周围时，按钮会主动向到鼠标所处的位置移动，并且在一定的区域内会跟着鼠标的动作而移动。当鼠标离开这片区域后，按钮也会自动回到原位。

核心代码:

// 1. 鼠标移动时，计算目标偏移量
btn.addEventListener('pointermove', (e) => {
  const r = btn.getBoundingClientRect();
  // 计算鼠标相对按钮中心的距离，并乘以吸力系数
  tx = (e.clientX - r.left - r.width / 2) * STRENGTH;
  ty = (e.clientY - r.top - r.height / 2) * STRENGTH;
  if (!raf) raf = requestAnimationFrame(loop);
});

// 2. 按钮吸附动画的核心逻辑
function loop() {
  // 利用线性插值，让当前位置(cx)不断逼近目标位置(tx)
  cx += (tx - cx) * EASE;
  cy += (ty - cy) * EASE;
  btn.style.transform = `translate(${cx}px, ${cy}px)`;

  // 如果距离足够小，则停止计算，直接对齐
  if (Math.abs(tx - cx) < 0.1 && Math.abs(ty - cy) < 0.1) {
    cx = tx; cy = ty;
    raf = null;
    return;
  }
  raf = requestAnimationFrame(loop);
}

上面两段代码是功能最核心的部分。第一段负责“追踪”，长沙网站开发利用getBoundingClientRect()计算出鼠标相对按钮中心的偏移量，再乘以STRENGTH（吸力系数）就得出了按钮应该移动到的位置。

第二段则负责“移动”，利用requestAnimationFrame逐帧渲染，就像Css中的动画过渡时间一样，可以让按钮的移动变得流畅。每次刷新后，按钮的位置都会向鼠标位置移动一点，直到鼠标所处位置的停下。

最后，鼠标离开时也会触发mouseleave事件，将tx和ty的值重置为0，让按钮再回到原本的位置，这样咱们想要的按钮吸附效果就完成了。

完整代码图如下：

三、视频展示

四、应用与扩展

这个效果可以用在企业官网首屏核心的“了解更多”按钮，或者用户登录/注册页面的提交按钮等等，都可以加入这种效果来吸引注意力，增加页面的交互效果。

而扩展方面，既可以通过修改代码中的STRENGTH和EASE来调整按钮的吸附速度和范围。也可以增加新的代码，让按钮的变化交互细节更加丰富。

以上就是长沙网站设计整理的按钮吸附效果的制作方法，希望对您有所帮助！

长沙蒲公英网络专业提供高效且优质的网站优化服务，为您的企业发展保驾护航！欢迎来电咨询：0731-84069615。