javascript - 我怎样才能最好地为多个重叠元素实现翻转和滚动事件？

Question

问题:

我在一个网站上工作，该网站有一个“拨号盘”，显示多个代表伞形公司不同部门的选项卡:

目前我已经用 HTML/CSS 准备好了一切(每个选项卡的位置)。内圈位于更高的 z-index 上，因为滚动时选项卡需要向外动画(我可以实现这部分)。选项卡的图像实际上是这样的:

不幸的是，直到现在我才意识到，由于 JavaScript 中的翻转和滚动机制，每个项目的边界都是方形的，这意味着它们在所有地方都重叠。比如中心圈的翻转区域其实是这样的:

这会减少标签内圈上一些巨大的可点击/可滚动区域。这种效果然后与每个选项卡叠加，使标准方法不可行。

---

方法:

这很好，我现在打算做的是测量鼠标离表盘中心的距离和 Angular ，并使用这些值来确定相关的选项卡，然后从那里开始工作。我基本上会执行以下操作:

1. 收集 Angular (使用atan2)和距离(使用pythag)。
2. 将我的 .click() 应用于整个表盘，并从那里使用这些值。
3. 使用 setInterval() 不断检查哪个项目被滚动并从那里处理它的动画。

---

问题:

我不确定如何实现我正在做的事情(使用 JQuery)。我知道如何在获得所需坐标后执行所有Math 操作，但我对获取实际坐标(确保跨浏览器的结果相同)没有信心。

我怎样才能最好地收集坐标:

1. 我表盘的中心。
2. 光标(假设光标与我的刻度盘中心位于同一轴内，即在刻度盘中心上滚动将意味着两组坐标相同)。

---

注意事项:

综上所述，任何达到相同结果(能够对重叠元素进行适当的翻转检测)的方法都同样有用。

Answer 1

获取中心:

var dialPos = $( "#Dial" ).offset();
var center = {
     x: dialPos.left + $( "#Dial" ).width() / 2,
     y: dialPos.top + $( "#Dial" ).height() / 2
};

光标坐标:

$( "#Dial" ).mousemove(function( e ) {
    var x = e.pageX - center.x;
    var y = e.pageY - center.y;
});