弧形菜单
弧形菜单
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);
追求原创特效