jQuery创建旋转控制盘菜单

我正在尝试创建“旋转轮子”菜单

这就是我的形象：

我需要能够滚动滚轮并单击滚轮

每四分之一的点击url都会根据url数组进行更改

你知道我从哪里开始吗

谢谢你

Avi检查此解决方案：

HTML:

<img src="http://sabanto.xyz/jqui/images/menu.png" id="img"  usemap="#Map" />
<map name="Map" id="Map">
    <area alt="" title="" href="http://stackoverflow.com" shape="poly" coords="390,54,393,403,729,393,690,229,590,117,501,74" />
    <area alt="" title="" href="http://stackoverflow.com" shape="poly" coords="395,404,396,728,546,696,655,604,715,490,729,394" />
    <area alt="" title="" href="http://stackoverflow.com" shape="poly" coords="394,727,392,403,57,395,87,532,156,635,262,704" />
    <area alt="" title="" href="http://stackoverflow.com" shape="poly" coords="389,55,392,401,57,392,77,274,130,185,213,106,304,70" />

</map>

<a class="left" href="javascript:"> <- </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a class="right" href="javascript:"> -> </a>

$(document).ready(function() {


        var deg = 0

        $('.right').click(function(){
            deg=deg+20; 
            rotate(deg);                   
        })
        $('.left').click(function(){
            deg=deg-20;  
            rotate(deg);                  
        })

        function rotate(deg)
        {
            $('#img').css('-moz-transform', 'rotate('+deg+'deg)');
            $('#img').css('-webkit-transform', 'rotate('+deg+'deg)');
            $('#img').css('-o-transform:', 'rotate('+deg+'deg)');
            $('#img').css('-ms-transform:', 'rotate('+deg+'deg)');
        }     

});

---

我建议您从在图像地图上绘制可单击区域开始。然后你可以试着用css3 transition转动方向盘。哇，太神奇了。。。有没有办法通过触摸和拖动来旋转轮子？是的，但当你点击拖动时，它会激活链接