这是你可能要达到什么样的一个例子:
HTML
CSS
* {
box-sizing: border-box;
}
.container {
width: 600px;
height: 600px;
border: 2px solid blue;
position: relative;
margin: 40px auto;
}
.main_circle {
position: absolute;
top: 50%;
display: block;
left: 50%;
width: 80px;
height: 80px;
border-radius: 100%;
border: 2px solid red;
padding: 25px 20px;
transform: translate(-50%, -50%) rotate(0deg);
background: blue;
z-index: 100;
}
.main_circle:before {
content: "";
height: 25px;
width: 30px;
display: block;
border: 2px solid red;
border-radius: 40px;
position: absolute;
float: left;
top: -10px;
z-index: 5;
}
.menu_items {
position: absolute;
height: 80px;
width: 80px;
border-radius: 100%;
border: 2px solid green;
padding: 17px;
display: block;
}
.item1 {
top: 20px;
left: 250px;
}
.item2 {
top: 260px;
right: 20px;
}
.item3 {
bottom: 20px;
left: 250px;
}
.item4 {
top: 260px;
left: 20px;
}
和js
var menuItems = $('.menu_items').length;
var step = 360/menuItems;
$('.menu_items').on('mouseover' , function(){
var classList = $(this).attr('class');
var identifier = classList.split(' ')[1].substr(4,1);
var calc = (parseInt(identifier) - 1) * step;
var transform = 'translate(-50%, -50%) rotate(' + calc + 'deg)';
console.log(transform);
$('.main_circle').css('transform', transform);
});
如果增加菜单项的数量,用css重新定位它们,js仍然可以工作。像我对item#(number)所做的那样命名类,它应该可以工作。玩的开心。