显示效果如下：

需要用到的知识：

等于半径长的圆弧所对的圆心角叫做1弧度的角，用符号rad表示，读作弧度。用弧度作单位来度量角的制度叫做弧度制。另外一种度量角的方法是角度制。弧度制的精髓就在于统一了度量弧与半径的单位，从而大大简化了有关公式及运算，尤其在高等数学中，其优点就格外明显。

一个完整的圆的弧度是2π，所以2π rad = 360°，1 π rad = 180°，

我们平时用的sin(x); x为π/2是就相等于90°，为1.

sin,cos用弧度制方便一点。

var dotLeft = ($(".container").width()-$(".dot").width())/2; 为什么要减去$(".dot").width()
因为我们的圆心（中心点）也是一个div，不像上面画的就是一个点，中心div定位也是从左上角定位的。所有要减去。
<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;

        console.log(Math.sin(ahd*2));

        console.log(Math.sin(ahd*6));

        console.log(Math.cos(ahd*2));

        console.log(Math.cos(ahd*3));

        //设置圆的中心点的位置

        $(".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>

<style type="text/css">

*{margin:0;padding:0;}

.container{position:relative;width:700px;height:800px; margin:0 auto; border:1px solid #F00;}

.box{position:absolute;width:50px;height:50px;background:#000;}

.dot{ position:absolute;width:20px;height:20px;background:#F00;}

</style>

</head>

<body>

<div class="container">

    <div class="dot"></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 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>

参考；http://www.cnblogs.com/lufy/archive/2012/06/21/2558049.html

javascript圆形排列的更多相关文章

  1. javascript 获取排列后的对象建值

    function getSortedParameter (parameterObject){ let attributes = []; parameterObject = parameterObjec ...

  2. javascript 中的原型继承

    javascript圆形变成的基本规则: 所有数据都是对象: 要得到一个对象,不是通过实例化类,而是找到一个对象作为原型并克隆它: 对象会记住它的原型: 如果对象无法响应某个请求,它会把这个请求委托给 ...

  3. div 环形排列

    javascript-按圆形排列DIV元素(一)---- 分析 效果图: 一.分析图: 绿色边框内:外层的DIV元素,相对定位; 白色圆形框:辅助分析的想象形状; 白点:为白色圆形的圆心点,中心点,点 ...

  4. [组合数学] 圆排列和欧拉函数为啥有关系：都是polya定理的锅

    本文是一个笨比学习组合数学的学习笔记,因为是笨比,所以写的应该算是很通俗易懂了. 首先,我们考虑这么一个问题:你有无穷多的\(p\)种颜色的珠子,现在你想要的把他们中的\(n\)个以圆形的形状等间距的 ...

  5. HTML5印章绘制电子签章图片，中文英文椭圆章、中文英文椭圆印章

    原文:HTML5印章绘制电子签章图片,中文英文椭圆章.中文英文椭圆印章 电子签章图片采集 印章图片的采集两种互补方式: 方式1:在线生成印章图片方式,但是这种方式有个弊端,对印章中公司名称字数有限制, ...

  6. 简答的理解C语言中的各种类型函数

    1.变参函数 变长参数的函数即参数个数可变.参数类型不定 的函数.最常见的例子是printf函数.scanf函数和高级语言的Format函数.在C/C++中,为了通知编译器函数的参数个数和类型可变(即 ...

  7. 2016CVTE编程题：兔子藏洞

    兔子藏洞 题目描述 一只兔子藏身于20个圆形排列的洞中(洞从1开始编号),一只狼从x号洞开始找,下次隔一个洞找(及在x+2号洞找),在下次个两个洞找(及在x+5号洞找),以此类推...它找了n次仍然没 ...

  8. WPF 图片浏览 伪3D效果

    原文:WPF 图片浏览 伪3D效果 首先上效果图: 因项目要求,需要把图片以"好看"."炫"的效果展示出来,特地研究了一下WPF关于3D方面的制作,奈何最终成果 ...

  9. [bzoj1488][HNOI2009]图的同构——Polya定理

    题目大意 求两两互不同构的含n个点的简单图有多少种. 简单图是关联一对顶点的无向边不多于一条的不含自环的图. a图与b图被认为是同构的是指a图的顶点经过一定的重新标号以后,a图的顶点集和边集能完全与b ...

随机推荐

  1. [转]printf 字符串格式化

    在将各种类型的数据构造成字符串时,sprintf 的强大功能很少会让你失望.由于sprintf 跟printf 在用法上几乎一样,只是打印的目的地不同而已,前者打印到字符串中,后者则直接在命令行上输出 ...

  2. PowerDesigner中NAME和COMMENT的互相转换,需要执行语句

    原文: http://www.cnblogs.com/xnxylf/p/3288718.html 由于PDM 的表中 Name 会默认=Code 所以很不方便, 所以需要将 StereoType 显示 ...

  3. 串口调试工具(Python2.7+pyserial+Tkinter)

    需要与串口设备进行通讯,那么一个调试工具是必须的. 根据我自己的需要,写了个简易版本的串口调试工具: 预览图: ====================== 项目结构: COM --SerialHel ...

  4. IBM Minus One(water)

    IBM Minus One Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  5. C语言--流程控制

    一.流程控制 1.顺序结构 *默认的流程结构,按照书写顺序执行每一条语句 2.选择结构 *对给定的条件进行判断,再根据判断结果来决定执行那一段代码 3.循环结构 *在给定条件成立的情况下,反复执行某一 ...

  6. C#实现在winfrom程序中下载文件

    //下载文件//downlaodUrl 系统路径如:http://xxx.xxx.xxx/UpFile/kaoqin.doc//fileName 自定义文件名字加后缀(如:考勤.doc)//fileP ...

  7. Jar

    http://docs.oracle.com/javase/6/docs/technotes/guides/jar/jar.html#Intro http://docs.oracle.com/java ...

  8. tls和ssl

    一个存在于 SSL 3.0 协议中的新漏洞于被披露,通过此漏洞,第三方可以拦截通过采用 SSL 3.0 的服务器传输的重要信息. 问题出在哪里? 与此问题相关的不是 SSL 证书本身,而是进行加密处理 ...

  9. JIRA官方：JIRA定制工作流

    定制适合项目的工作流 JIRA提供了一个缺省工作流和一系列问题类型,非常适合缺陷追踪和软件开发.在使用中你可以随时根据实际情况对流程进行调整,确保流程能够快速的适应坏境变化. 使你的工作流图形化 使用 ...

  10. 剪花布条(kmp)

    欢迎参加——每周六晚的BestCoder(有米!) 剪花布条 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ...