Question

我试图创建旋转滚轮菜单。

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

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

每个季度，点击网址都会根据网址数据发生变化。

我可以从哪里开始创意？

感谢分配

阿维

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

jQuery创建一个旋转轮菜单

1 个答案: