需要将圆形图像分成8个部分，并在每个部分上放置标签。按下标签会将圆圈转到分割部分

Question

我有一个圆形图像（如轮盘模板），我需要将其拆分为8，并在每个部分上放置标签。当按下分开的部分时，我需要圆圈指向正确的部分。

这是我平时所拥有的东西： http://jsfiddle.net/EYALIN/x8q9nqt1/

这是JS：

var img = document.querySelector('img');
img.addEventListener('click', onClick, false);


function onClick() {
    this.removeAttribute('style');

    var deg = 500 + Math.round(Math.random() * 500);

    var css = '-webkit-transform: rotate(' + deg + 'deg);';

    this.setAttribute(
        'style', css
    );
}

Answer 1

您需要做的是使用分隔符在photoshop中创建此图像，然后使用图像映射选择这些分隔符，然后使用jQuery选择它们。我很快就会发布一张图片和图片地图代码。

然后我们使用image map generator

得到这个结果：

<img src="url/to/your/image.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
    <area alt="" title="" href="#" shape="rect" coords="506,493,510,1017" />
    <area alt="" title="" href="#" shape="poly" coords="901,833,519,496,518,503,895,839" />
    <area alt="" title="" href="#" shape="poly" coords="499,499,139,848,132,842,495,493" />
    <area alt="" title="" href="#" shape="poly" coords="492,495,12,502,13,491,493,488" />
    <area alt="" title="" href="#" shape="poly" coords="152,174,500,478,492,484,146,183" />
    <area alt="" title="" href="#" shape="poly" coords="498,21,502,473,512,474,507,20" />
    <area alt="" title="" href="#" shape="poly" coords="853,156,515,479,522,484,859,163" />
    <area alt="" title="" href="#" shape="poly" coords="1005,484,526,487,528,496,1003,494" />
</map>

现在您可以使用jQuery为它们选择不同的分隔符和钩子事件：

$('area').each(function() {
    // do something
});