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