如何才能最好地为多个重叠元素实现翻转和转出事件？

Question

问题：

我正在一个网站上工作，其中有一个“拨号”，显示一些代表伞形公司不同部门的标签：

目前，我已准备好所有HTML / CSS（每个标签的定位）。内圈位于较高的z-index，因为当翻转时，标签需要向外动画（我可以实现这一部分）。标签的图像实际上如下所示：

不幸的是，直到现在才发生这种情况，由于JavaScript中的翻转和转出的机制，每个项目的边界都是正方形，这意味着它们遍布整个地方。例如，中心圆的翻转区域实际上就是：

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

---

方法：

这很好，我现在打算做的是测量鼠标距离表盘中心的距离和角度，并使用这些值来确定相关的标签，并从那里开始工作。我基本上会做以下事情：

1. 收集angle（使用atan2）和distance（使用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;
});

Answer 2

您可以在图层堆栈上定义图像映射。地图将定义点击/悬停区域，浏览器将负责点击检测。使用Adobe ImageReady，我已经映射了参考图像的一部分，以便＆＃34; Reprise＆＃34;和＆＃34;倡议＆＃34;是热点：

ImageReady产生了以下HTML：

<img src="images/Imagemap.png" width="488" height="488" border="0" alt="" usemap="#Imagemap_Map">
<map name="Imagemap_Map">
    <area shape="poly" alt="" coords="82,336, 138,303, 130,287, 123,265, 120,238, 125,206, 136,179, 158,152, 178,136, 209,122, 244,117, 244,55, 215,60, 184,67, 158,77, 122,101, 97,130, 73,169, 62,202, 59,224, 58,253, 61,281, 73,318" href="#">
    <area shape="poly" alt="" coords="73,72, 112,111, 138,89, 161,76, 187,66, 214,59, 244,57, 244,0, 205,4, 165,12, 118,34, 94,51" href="#">
</map>

（正如你所看到的，映射任意区域可能会令人沮丧，如果不使用工具，我敢说几乎不可能。）

您可以将地图应用到所有内容的透明图像上。最终的装配可以想象成下面的堆栈：

区域突出显示仅供参考。真实的构图应该是100％透明的。

祝你好运！