求助：JQuery实现随鼠标沿大圆圆周移动的小圆定位异常问题

问题根源 #

你的代码存在两个核心坐标体系不匹配的问题：

1. 定位基准冲突：innerCircle是相对于outerCircle的绝对定位，但你用页面全局坐标直接结合outerCircle.offset()计算位置，导致坐标基准错位。
2. 双重偏移叠加：innerCircle本身设置了transform: translate(-50%, -50%)（让自身中心对齐定位点），但你的JS代码又额外减去了自身半径，造成重复偏移，最终导致小圆跑到大圆右下角。

修正方案 #

调整JS逻辑，将鼠标坐标转换为outerCircle内部的相对坐标，并匹配innerCircle的transform定位规则：

修正后的完整代码 #

JavaScript

$(document).ready(function() {
  const outerCircle = $('#outerCircle');
  const innerCircle = $('#innerCircle');
  const outerCircleRadius = outerCircle.width() / 2;
  const innerCircleRadius = innerCircle.width() / 2;

  $(document).on('mousemove', function(event) {
    // 获取outerCircle相对于页面的偏移量
    const containerOffset = outerCircle.offset();
    // 转换鼠标坐标为outerCircle内部的相对坐标（以outerCircle左上角为原点）
    const relMouseX = event.clientX - containerOffset.left;
    const relMouseY = event.clientY - containerOffset.top;
    // outerCircle自身的中心坐标（内部坐标系）
    const outerCenterX = outerCircleRadius;
    const outerCenterY = outerCircleRadius;

    // 计算鼠标与outerCircle中心的夹角
    const angle = Math.atan2(relMouseY - outerCenterY, relMouseX - outerCenterX);

    // 计算innerCircle中心在outerCircle内部的目标位置（贴合边界）
    const targetX = outerCenterX + Math.cos(angle) * (outerCircleRadius - innerCircleRadius);
    const targetY = outerCenterY + Math.sin(angle) * (outerCircleRadius - innerCircleRadius);

    // 设置位置：因为innerCircle有translate(-50%,-50%)，直接用中心坐标即可
    innerCircle.css({
      left: targetX,
      top: targetY
    });
  });
});

CSS（无需修改）

body {
  margin: 0;
  overflow: hidden;
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  width: 200px;
  height: 200px;
  border: 2px solid white;
  border-radius: 50%;
  position: relative;
}

.inner-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.outer-circle {
  width: 300px;
  height: 300px;
  border: 2px solid white;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

HTML（无需修改）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div class="container">
  <div class="circle outer-circle" id="outerCircle">
    <div class="inner-circle" id="innerCircle"></div>
  </div>
</div>

关键调整说明 #

• 转换鼠标坐标为outerCircle内部的相对坐标，确保计算的角度和位置是基于大圆自身的坐标系。
• 利用innerCircle的transform: translate(-50%, -50%)特性，直接将定位点设置为小圆的中心坐标，避免重复偏移计算。
• 计算目标位置时，用outerCircleRadius - innerCircleRadius确保小圆完全贴合大圆边界（不会一半在圆外）。

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