弧形菜单

弧形菜单

 

css部分

    body,div,p,span{ margin:0; padding:0; font-size:12px; font:12px Arial,'Hiragino Sans GB','Microsoft YaHei',sans-serif; color:#555;}
    .m-MenuWap{ width:995px; height:931px; position:relative; margin-top:50px;}    .m-MenuWap a{ position:absolute; display:none; background-size:100% 100% !important;}
    .m-MenuWap a.in{ width:180px; height:180px;}
    .m-MenuWap a.out{ width:119px; height:119px;}

引入jquery

<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

html部分

<div class="m-MenuWap"></div>

js调用

$(".m-MenuWap").circleMenu({
    num:6,
    className:"in",
    imgName:"inImg",
    radius:230,
    size:"180,180",
    href:["http://www.baidu.com","http://www.baidu.com","http://www.baidu.com","http://www.baidu.com","http://www.baidu.com","http://www.baidu.com"]
});

 

js部分

(function($){
    $.fn.circleMenu = function(o){
        var defs = {
            ground:$(".ground"),
            num:6,
            className:"in",
            imgName:"inImg",
            radius:200,//中心距离
            menuRange:"360",//展开范围
            size:"180,180",//按钮尺寸
            href:[]
        };
        var obj = this;
        var opt = $.fn.extend({},defs,o);
        var style;
        var circular = 2 * Math.PI / 360 * (parseFloat(opt.menuRange) / opt.num);
        var size = opt.size.split(",");
        var leftOr = parseInt(obj.width()/2-size[0]/2),topOr = parseInt(obj.height()/2-size[1]/2);
        for(i=0 ; i<opt.num ; i++){
            var left = opt.radius * Math.cos(i * circular) + leftOr;
            var top = opt.radius * Math.sin(i * circular) + topOr;
            style = 'background:url(images/'+opt.imgName+(i+1)+'.png);left:'+left+'px; top:'+top+'px; width:'+size[0]+'px; height:'+size[1]+'px;'
            obj.append('<a href="'+opt.href[i]+'" class="'+opt.className+'" style="'+style+'" data-i="'+i+'"></a>');
            
        }
        function animate(){
            var $tar = obj.find("a");
            var _length = $tar.length;
            var _num = -1;
            var isdo = true;
            if(isdo){
                opt.ground.addClass("active")
                setTimeout(function(){showPic()},100)
            }
            function showPic(){
                var c = setInterval(function(){
                    _num = _num + 1;
                    if(_num >_length-1){
                        clearInterval(c)
                    }else{
                        console.log(_num);
                        $tar.eq(_num).fadeIn();
                    }
                },100) 
            }
        }
        animate()
    }
})(jQuery);