zoukankan      html  css  js  c++  java
  • javascript圆形排列

    显示效果如下:

    需要用到的知识:

    等于半径长的圆弧所对的圆心角叫做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

  • 相关阅读:
    LPTHW 笨办法学python 20章
    LPTHW 笨方法学python 19章
    LPTHW 笨方法学python 18章
    LPTHW 笨方法学习python 16章
    hadoop删除节点。
    url中的百分号转译
    thrift编译安装
    python学习:函数的学习
    jsp静态导入和动态导入 笔记
    简要描述cookie和session的区别:
  • 原文地址:https://www.cnblogs.com/youxin/p/3365076.html
Copyright © 2011-2022 走看看