<!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>
360度环形菜单
最新推荐文章于 2023-11-26 17:31:14 发布