360度环形菜单

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>360度环形菜单</title>
<style type="text/css">
/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{*font-size:100%}
.hid{text-indent:-9999px;font-size:0px;overflow:hidden;width:0px;height:0px;display:block}
body{padding-top:42px;min-width:1000px; font: 12px/150% tahoma,'\5b8b\4f53',sans-serif;}

.circle_menu_box {position: fixed; right: 50%; bottom: 52%;}
.menu_list li { position: absolute; width: 40px; height: 40px; background: blue; color: #fff; line-height: 40px; text-align: center; bottom: 2px; right: 2px; border-radius: 50%;}
.btn_show { width: 50px; height: 50px; bottom: 0; right: 0; position: absolute; background: red; z-index: 99;border-radius: 50%; font-size: 20px; line-height: 50px; text-align: center; text-decoration: none;}
body,td,th { font-family: tahoma, \5b8b\4f53, sans-serif; }
</style>
</head>
<body>
<div class="circle_menu_box">
    <ul class="menu_list" id="menu_list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li><!--
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>-->
    </ul>
    <a href="javascript:void(0)" class="btn_show">展开</a>
</div>

<script src="http://ossweb-img.qq.com/images/js/jquery/jquery-1.7.2.min.js"></script>
<script>
(function() {
    $menuList = $('#menu_list li');
    var listWidth = ($menuList.outerWidth()) / 2; // li元素宽度的一半
    var listHeight = ($menuList.outerHeight()) / 2; // li元素高度的一半
    var r = 150; // 圆弧半径
    var menuNum = $menuList.length; // 菜单个数
    var angle = 360; // 圆弧角度
    var perAngle = angle / (menuNum); // 菜单之间的角度
    var posArr = []; // 存放每个元素right和bottom的数组

    function showMenu() {

        for (var i = 0; i < menuNum; i++) {
            (function(num) {
                posArr[num] = {
					/*
						angle:<=90 
						'rightPos' : Math.sin()
						'bottomPos': Math.sin()
						
						angle:>90 
						'rightPos' : Math.sin()
						'bottomPos': Math.cos()
					 */
                    'rightPos': Math.sin((angle - perAngle * num) * Math.PI / 180) * r,
                    'bottomPos': Math.cos(perAngle * num * Math.PI / 180) * r
                }; //把每个li元素的位置存到数组里
                console.log(perAngle)
                console.log(Math.floor(posArr[num].rightPos)  + " - " + Math.floor(posArr[num].bottomPos) + "\n")
            })(i);
        }
        for (var i = 0; i < menuNum; i++) {
            (function(a) {
                setTimeout(function() {
                    $menuList.eq(a).stop().animate({
                        right: Math.floor(posArr[a].rightPos) - listWidth,
                        bottom: Math.floor(posArr[a].bottomPos) - listHeight
                    });
                }, a * 50);
            })(i);
        }
    }

    function hideMenu() {
        for (var i = 0; i < menuNum; i++) {
            (function(a) {
                setTimeout(function() {
                    $menuList.eq(a).stop().animate({
                        right: 2,
                        bottom: 2
                    });
                }, a * 50);
            })(i);
        }
    }
    $('.btn_show').toggle(function() {
        showMenu();
        $(this).html('缩小');
    }, function() {
        hideMenu();
        $(this).html('展开');
    });
})();
        
        
</script>

</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值