Javascript 如何最好地实现多个重叠元素的滚动和滚动事件？ 问题:

我在一个网站上工作，该网站上有一个“拨号”，显示多个代表伞式公司不同部门的标签：

目前，我已经用HTML/CSS（每个选项卡的位置）准备好了一切。内圆位于较高的

z-index

上，因为翻滚时标签需要向外设置动画（我可以实现这一部分）。选项卡的图像实际上如下所示：

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

这削弱了标签内圈的一些巨大的可点击/滚动区域。然后，该效果与每个选项卡叠加，使得标准方法不可行

---

方法： 这很好，我现在计划做的是测量鼠标与刻度盘中心的距离和角度，并使用这些值确定相关的标签，然后从那里开始工作。我将基本上做以下工作：

收集角度（使用atan2）和距离（使用毕达格）

将my

。单击（）

应用于整个拨号盘，然后从中使用这些值

使用

setInterval（）

不断检查哪个项目被滚动，并从那里处理其动画

---

问题: 我不确定如何实现我正在做的事情（使用JQuery）。我知道如何做所有的

数学

工作一旦我得到了我需要的坐标，我就没有信心得到实际的坐标（确保跨浏览器得到相同的结果）

如何最好地收集以下各项的坐标：

我的表盘的中心

光标（假设光标位于与刻度盘中心相同的轴内，即滚动到刻度盘中心将意味着两组坐标相同）

---

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

要获得中心：

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;
});

---

可以在图层堆栈上定义图像贴图。地图将定义点击/悬停区域，浏览器将负责点击检测。使用Adobe ImageReady，我已映射了您参考图像的一部分，因此“重新发布”和“倡议”是热点：

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%透明的

---

祝你好运

难道你不能在一个透明的图像上叠加一个图像贴图在其他层上吗？对我来说似乎更容易…@Humberto图像地图不是只让你有圆圈和正方形吗？非常感兴趣，如果不是。你可以定义任意区域。请参阅此规范：我正在根据图像地图详细说明答案。@Humberto看起来像我的解决方案，谢谢。期待着一个详细的答案（w3.org似乎很难从一种产生信息的方式上阅读）。谢谢你，伙计，我会把这个放在手边，在接下来的几周里我会做其他类似的事情。现在有很多在线的东西。