css 圆形/环形 排列
2019-06-14 本文已影响32人
知足常乐晨
项目需要做个环形的导航排列，网上找到一篇详细介绍原理的文章javascript-按圆形排列DIV元素(一)---- 分析，然后尝试着把它实现了，效果图如下：
image.png
源码分享给大家哦，拿走不谢O(∩_∩)O
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<title>css圆形排列</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//中心点横坐标
var dotLeft = ($(".container").width()-$(".dot").width())/2;
//中心点纵坐标
var dotTop = ($(".container").height()-$(".dot").height())/2;
//起始角度
var stard = 0;
//半径
var radius = 200;
//每一个BOX对应的角度;
var avd = 360/$(".box").length;
//每一个BOX对应的弧度;
var ahd = avd*Math.PI/180;
//设置圆的中心点的位置
$(".dot").css({"left":dotLeft,"top":dotTop});
$(".box").each(function(index, element){
$(this).css({"left":Math.sin((ahd*index))*radius+dotLeft,"top":Math.cos((ahd*index))*radius+dotTop});
});
})
</script>
</head>
<body>
<div class="container">
<div class="dot">0</div>
<div class="box">支付宝</div>
<div class="box">支付宝</div>
<div class="box">支付宝</div>
<div class="box">支付宝</div>
<div class="box">支付宝</div>
<div class="box">支付宝</div>
<div class="box">支付宝</div>
<div class="box">支付宝</div>
</div>
</body>
<style type="text/css">
html,body{
width: 100%;
height: 100%;
}
.dot{
position: absolute;
}
.container{
width: 100%;
height: 100%;
}
.box{
width: 100px;
height: 100px;
position: absolute;
}
</style>
</html>
