基于jQuery代码实现圆形菜单展开收缩效果

废话不多说了，直接给大家贴代码了，具体代码如下所示：
<head><script src="js/jquery.min.js"></script><script src="js/jquery.menu.js"></script><style>body {margin:0 auto;background:none repeat scroll 0 0 #FCFCFC}.outer_container {height:200px;position:relative}.menu_button {position:absolute;bottom:0;left:0;border-radius:50%;height:36px;width:36px;border:4px solid #fff;box-shadow:rgba（0,0,0,.3） 0 3px 8px 0,rgba（0,0,0,.2） 0 0 0 1px,inset rgba（0,0,0,.3） 0 0 0 1px,inset rgba（255,255,255,.3） 0 1px 0 1px;text-indent:-99999px;overflow:hidden;background-color:#e34f3f;background-image:-moz-linear-gradient（top, #f76f54, #c61f1f）;background-image:-ms-linear-gradient（top, #f76f54, #c61f1f）;background-image:-webkit-gradient（linear,0 0,0 100%,from（ #f76f54）,to（ #c61f1f））;background-image:-webkit-linear-gradient（top, #f76f54, #c61f1f）;background-image:-o-linear-gradient（top, #f76f54, #c61f1f）;background-image:linear-gradient（top, #f76f54, #c61f1f）;background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient（startColorstr="#f76f54", endColorstr="#c61f1f", GradientType=0）;z-index:9999;outline:0}.menu_button span {display:block;height:36px;width:36px;background:url（"../images/cross.png"） no-repeat center center;-webkit-transition:.4s ease;-moz-transition:.4s ease;-ms-transition:.4s ease;-o-transition:.4s ease;transition:.4s ease;background-size:20px 20px}.menu_option {bottom:18px;left:5px;position:absolute}.menu_option li {position:absolute;display:block;top:0;left:0;-webkit-transition:.3s;-moz-transition:.3s;-ms-transition:.3s;-o-transition:.3s;transition:.3s}.menu_option li a {position:relative;display:block;border-radius:50%;width:26px;height:26px;border:3px solid #fff;box-shadow:rgba（0,0,0,.4） 0 0 5px 0,rgba（0,0,0,.2） 0 0 0 1px,inset rgba（0,0,0,.5） 0 0 2px 0;text-indent:-99999px;overflow:hidden;background:#444}.menu_option li a span {background-attachment:scroll;background-clip:border-box;background-color:transparent;background-image:url（"../images/usr.png"）;background-origin:padding-box;background-position:center center;background-repeat:no-repeat;background-size:16px 16px;display:block;width:26px;height:26px;-webkit-transition:.4s ease;-moz-transition:.4s ease;-ms-transition:.4s ease;-o-transition:.4s ease;transition:.4s ease}.btn-rotate span {-webkit-transform:rotate（-135deg）;-moz-transform:rotate（-135deg）;-ms-transform:rotate（-135deg）;-o-transform:rotate（-135deg）;transform:rotate（-135deg）}</style></head><body><！-- 代码 开始 --><div id="outer_container" class="outer_container" ><a class="menu_button" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="Toggle"><span>Menu Toggle</span></a><ul class="menu_option"> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><span>Item</span></a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><span>Item</span></a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><span>Item</span></a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><span>Item</span></a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><span>Item</span></a></li></ul></div><！-- 代码 结束 --><script>function PieMenuInit（）{ $（"#outer_container"）.PieMenu（{"starting_angel":0, //起始角度"angel_difference" : 90, //散开角度"radius":100, //圆形弧度}）; }$（function（） { PieMenuInit（）; }）;</script></body>
以上所述是小编给大家介绍的基于jQuery代码实现圆形菜单展开收缩效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！