//圆弧菜单,在Path菜单的基础上修改,后续将再整理代码,并封装为jQuery插件 var Radius = 260; // 小图出来的半径 var Offset = 80; // 小图出来后的偏移量 var OutSpeed = 80; // 小图出现的速度 var OutIncr = 50; // 小图出来的旋转 var OffsetSpeed = 200; // 小图出来的旋转速度 var InSpeed = 480; // 小图进去的速度 var InIncr = -80; // 小图进去的旋转 var MaxMenuCount = 5; // 最大菜单数量 var OpenRad = 0.8 * Math.PI;//菜单展开的弧度,2π是一个圆 var ArcDir = "R"; //圆弧菜单的方向 var PathStatus = 0; // function PathRun() { var PathMenu = $('#PathMenu'); var PathItems = PathMenu.children('.PathItem').slice(0, MaxMenuCount); var Count = PathItems.size(); var iteRad = OpenRad / (Count - 1); //菜单项之间间隔的弧度 var dirRad; //菜单正对的弧度,只有4种 switch (ArcDir) { case "U": dirRad = Math.PI * 1.3; break; case "R": dirRad = Math.PI * 0.8; break; case "D": dirRad = Math.PI * 0.3; break; case "L": dirRad = Math.PI * 1.8; break; } var firstMenuRad = dirRad - OpenRad/2; //第一个菜单的弧度 if (PathStatus == 0) { PathItems.each(function(index) { var currentMenuRad = firstMenuRad - index * iteRad; //当前菜单的弧度 var X = Math.cos(currentMenuRad) * Radius; var Y = Math.sin(currentMenuRad) * Radius; var X1 = Math.cos(currentMenuRad) * (Radius + Offset); var Y1 = Math.sin(currentMenuRad) * (Radius + Offset); $(this).show().animate({ left : X1, bottom : Y1 }, OutSpeed, function() { $(this).animate({ left : X, bottom : Y }, OffsetSpeed); }); }); //显示遮罩层 $(".masking-out").show(); PathStatus = 1; } else if (PathStatus == 1) { PathItems.each(function(index) { if (parseInt($(this).css('left')) == 0) { X1 = 0; } else { X1 = parseInt($(this).css('left')) + Offset; } if (parseInt($(this).css('bottom')) == 0) { Y1 = 0; } else { Y1 = parseInt($(this).css('bottom')) + Offset; } $(this).animate({ left : X1, bottom : Y1 }, OffsetSpeed, function() { $(this).animate({ left : 0, bottom : 0 }, InSpeed + index * InIncr); }).hide(); }); $(".masking-out").hide(); PathStatus = 0; } }