用transform-origin圆点旋转<script> var liSize = 10, li = ''; for(var i=0; i<liSize; i++) { li += '<li style="transform: rotate('+360/liSize*i+'deg)"></li>'; } $('.zh-circle').html(li);</script>得到的是根据length数量出来的角度分布，length越少，小圆间隔越大，那如果我想固定隔30度一个小圆，当小圆数量到足够多大圆无法放下的时候，小圆的间隔才变小，应该如何解决
1 回答
慕村9548890
TA贡献1884条经验 获得超4个赞
你30度一个也就是放12个，就做个判断看liSize是否大于12，是的话就用360/liSize*i，否则就30*i
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.zh-circle{
width: 300px;
height: 300px;
border: 1px solid red;
border-radius: 50%;
list-style: none;
position: relative;
margin: 300px;
}
.zh-circle li{
width: 30px;
height: 30px;
border: 1px solid red;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin: -15px 0 0 -15px;
transform-origin:50% 50%;
}
</style>
</head>
<body>
<ul class="zh-circle">
</ul>
<script src="jquery-2.1.0.js"></script>
<script>
var liSize = 14,
li = '';
if(liSize>12){
for(var i=0; i<liSize; i++) {
li += '<li style="transform: rotate('+360/liSize*i+'deg) translate(150px)"></li>';
}
}else{
for(var i=0; i<liSize; i++) {
li += '<li style="transform: rotate('+30*i+'deg) translate(150px)"></li>';
}
}
$('.zh-circle').html(li);
</script>
</body>
</html>
添加回答
举报
0/150
提交
取消