zoukankan      html  css  js  c++  java
  • 按圆形轨迹排列元素

    <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{  300px; height: 300px; background: #F3F0F0; position: relative; border-radius: 50%; }
    .box::after{ content: "";  300px; height: 300px; background: white; transform: scale(.5); border-radius: 50%; position: absolute; }
    .box span{  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 );
    

    最后来个效果图

  • 相关阅读:
    vue项目 安装
    处理XML的几种方式
    从URL中获取搜索关键字
    Azure VM 远程无法登陆问题(No Remote Desktop License)
    也谈[关于大型网站技术演进的思考--存储的瓶颈]
    UML类图
    Apache Spark探秘:三种分布式部署方式比较
    Standalone Debugging Tools for Windows (WinDbg)
    UML: CIM & PIM
    C# 延迟初始化
  • 原文地址:https://www.cnblogs.com/diantao/p/5789743.html
Copyright © 2011-2022 走看看