如何为元素添加全方向（左、右、下）磁引力效果？当前仅顶部生效

问题说明 #

我实现的磁引力效果目前仅在元素顶部区域生效，需要修改代码让效果在左、右、下所有方向正常触发，实现鼠标在元素任意区域移动时，内部元素都能跟随鼠标方向产生偏移的磁引力效果，且无需颜色变化。

问题根源 #

1. 坐标计算偏差：原代码使用e.pageY（相对于文档顶部的坐标）配合getBoundingClientRect()（相对于视口的坐标），页面滚动时会出现计算误差，导致偏移逻辑异常；应改用e.clientX/e.clientY（相对于视口的坐标）保证计算准确。
2. 交互区域不足：若.navv元素未设置足够的高度，鼠标只能在顶部小范围触发效果，需要通过CSS确保元素有完整的可交互区域。

修复后的代码 #

JavaScript 代码

const btns = document.querySelectorAll(".navv");

btns.forEach((btn) => {
  btn.addEventListener("mousemove", function(e){
    const position = btn.getBoundingClientRect();
    // 改用视口坐标计算，避免滚动带来的偏差
    const x = e.clientX - position.left - position.width / 2;
    const y = e.clientY - position.top - position.height / 2;

    // 统一X/Y方向偏移系数，让各方向效果均衡，可按需调整数值
    btn.children[0].style.transform = `translate(${x * 0.3}px, ${y * 0.3}px)`;
  });
});

btns.forEach((btn) => {
  btn.addEventListener("mouseout", function(){
    btn.children[0].style.transform = "translate(0, 0)";
  });
});

补充CSS（确保交互区域完整）

给.navv设置合适的宽高，保证鼠标能覆盖元素全区域：

.navv {
  position: relative;
  width: 40px; /* 根据图标尺寸调整 */
  height: 40px; /* 设置足够高度，覆盖上下左右交互区域 */
  cursor: pointer;
}

.navm {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#fanav {
  width: 24px; /* 匹配你的图标实际尺寸 */
  height: 24px;
}

HTML 代码（保持原有结构即可）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>store</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.cdnfonts.com/css/metropolis" rel="stylesheet">
    
</head>
<body>
    <nav class="firstnav">
        <a href=""><img src="imgs/logo.png" alt="" class="logo"></a>
        <ul>
            <li><a href="">Shop</a></li>—
            <li><a href="">Community</a></li>—
            <li><a href="">Catalogue</a></li>
        </ul>
        <div class="navv">
        <div class="navm" g-component="SampleComponent">
            <img src="imgs/menu.png" alt="" id="fanav" onclick="nav()">
        </div>
        </div>
        <a href="" class="cart">Cart 0</a>
        <script src="script.js"></script>
        
    </nav>
</body>
</html>

效果说明 #

修复后，鼠标在.navv元素的左、右、上、下任意区域移动时，内部图标都会跟随鼠标方向产生平滑偏移，鼠标移出后自动恢复原位，实现全方向的磁引力效果。

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