jQuery创建旋转轮菜单

Question

我正在尝试创建旋转轮菜单。

这是我自己的形象： menu http://sabanto.xyz/jqui/images/menu.png

我需要能够滚动轮，点击轮。

每一个点击URL都会根据一系列网址而改变。

任何想法，我可以从哪里开始？

感谢配发

阿维

Answer 1

检查此解决方案：

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> 

JS：

$(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)'); 
     }  

}); 

DEMO