html弧形列表效果,jQuery效果 弧形弹出菜单

/p>

<

前端开发职描述及岗位：

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, ‘b8bf53’, sans-serif;

}

.circle_menu_box {

position: fixed;

right: 30px;

bottom: 30px;

}

.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;

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

展开

(function () {

$menuList = $(‘#menu_list li’);

var listWidth = ($menuList.outerWidth()) / 2; // li元素宽度的一半

var listHeight = ($menuList.outerHeight()) / 2; // li元素高度的一半

var r = 220; // 圆弧半径

var menuNum = $menuList.length; // 菜单个数

var angle = 90; // 圆弧角度

var perAngle = angle / (menuNum – 1); // 菜单之间的角度

var posArr = []; // 存放每个元素right和bottom的数组

function showMenu() {

for (var i = 0; i < menuNum; i++) {

(function (num) {

posArr[num] = { ‘rightPos’: Math.sin((angle – perAngle * num) * Math.PI / 180) * r, ‘bottomPos’: Math.sin(perAngle * num * Math.PI / 180) * r }; //把每个li元素的位置存到数组里

})(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).

}, function () {

hideMenu();

$(this).

});

})();