码迷,mamicode.com
首页 > 其他好文 > 详细

按圆形轨迹排列元素

时间:2016-08-20 11:27:56      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:

<div class="box">
	<span>0</span>
	<span>1</span>
	<span>2</span>
	<span>3</span>
	<span>4</span>
	<span>5</span>
	<span>6</span>
	<span>7</span>
	<span>8</span>
	<span>9</span>
	<span>10</span>
	<span>11</span>
	<span>12</span>
</div>

这里的span数量是可以随意增加的

.box{ width: 300px; height: 300px; background: #F3F0F0; position: relative; border-radius: 50%; }
.box::after{ content: ""; width: 300px; height: 300px; background: white; transform: scale(.5); border-radius: 50%; position: absolute; }
.box span{ width: 40px; height: 40px; position: absolute; border-radius: 50%; background: orange; color: white; text-align: center; line-height: 40px; font-weight: bold; }

写css的时候务必注意,中间圆的半径不能超过大圆和小圆的差值

function printRing( bcr , mcr , scr ){
	// bcr 大圆半径,mcr 大圆和小圆之间那个圆的半径(这个圆的直径不能超过大圆半径和小圆半径的差值),scr 小圆半径
	var $span = $("span");
	var len = $span.length;
	var a = Math.PI / 180 ;
	var r = ( bcr - scr ) / 2 + scr; //环形的半径=(大圆半径 - 小圆半径)/ 2 + 小圆半径;
	var angle = 360 / len; //根据span的数量来决定弧度大小
	for( var i = 0 ; i < len ; i++){
		var x="x"+i , y="y"+i;
		var x = bcr + Math.sin( a * angle * i ) * r ;
		var y = bcr + Math.cos( a * angle * i ) * r ;
		$span.eq(i).css({ "left" : ( x - mcr ) + "px" , "top" : ( y - mcr ) + "px"});
	}
}
printRing( 150 , 20 , 75 );

最后来个效果图

技术分享

按圆形轨迹排列元素

标签:

原文地址:http://www.cnblogs.com/diantao/p/5789743.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!