1

我想以圆形的形式放置许多 div。我将为 div 使用相对定位。首先，我试图在圆圈周围放置四个 div

div 1 - 前 50，左 100

div 2 - 前 100，左 150

div3 - 前 150，左 100

div 4 - 前 100，左 50

我将在实际情况下计算值并设置它们，但现在没关系。是否可以在外部 div 中创建四个 div（在实际情况下会是一个很大的数字）。但我需要为这些 div 分配不同的顺序 ID，并将它们放在提到的位置。

我将不得不计算然后使用脚本分配顶部和左侧位置。那么您能否展示如何使用脚本分配这些值。

4

3 回答 3

1

这确实是一个很好的问题，因为它还需要一些数学背景。

所以，首先，让我们说一下我们要做什么： 0. 你必须决定圆的中心和它的半径 1. 我们必须决定在哪个角度，在一个圆上，我们应该放置我们的 div 2 然后我们应该做一个给定角度的函数，为您提供 div 的位置

那么，我们该怎么做呢？

  1. 决定哪个应该是圆的中心（如果它必须留在页面的中心

  2. 决定半径（也可以根据窗户尺寸计算）

  3. 一些三角学：要理解角度迭代，只需将 360° 除以 div 的数量：如果你有两个 div，那么你的角度间隔是 360/2=180（丑陋）。如果你有 10 个 div，你的 intrval 是 36°

很好，现在我们可以开始编码了。

  1. 获取中心：我只是在这个stackoverflow 链接上将你重定向到它

  2. 使用相同的代码来确定半径

  3. 该函数将 div 的数量、半径、中心作为输入，并返回一个带有 div 坐标的数组。中心是一个 2 位数组（x 和 y）。在函数中我们做了一些调整以输出 div 的实际位置。

.

 function getCoords(divNum, radius, center){
   var num= divNum;
   var angleInt= (6.28/num);
   var outArray=[];
   for (i=0;i<divNum;i++){
    outArray.push([(Math.cos(angleInt*i)*radius+center[0]),(Math.sin(angleInt*i)*radius+center[1])]);
   }
  return outArray;
}

好了，完成了，现在您可以使用任何 jquery 方法放置 div，如下例所示：

var localization=getCoords(10,200,[400,400]);

var i=1;
for (var element in localization){
    var posTop=localization[element][0];
    var posLeft=localization[element][1];
    var element= $("<div class='inner'>"+i+"</div>");
    $(element).css({ position: "absolute",
            marginLeft: 0, marginTop: 0,
            top: posTop, left: posLeft });
    $("body").append(element);
   i=i+1;

}

希望这可以帮助

于 2012-06-01T07:25:46.790 回答
1 
<script>
    $(document).ready(function() {
        "use strict";

        var NR_OF_ITTERATIONS = 4,
            RADIUS = 40,
            i,
            $wrapper = $("#wrapper");

        for(i=0;i<NR_OF_ITTERATIONS;i+=1) {
            $wrapper.append(
                $("<div/>")
                    .css({
                        top: /* Top position */,
                        left: /* Left position */
                    });
            );
        }
    };
</script>

<style>
    ​#wrapper > div {
        position: absolute;
        border: 1px solid black;
        width: 40px;
       height: 40px;        
    }​
</style>

<div id="wrapper"></div>
于 2012-06-01T07:03:25.010 回答
1

这是生成div的代码。将您的顶部和左侧样式放在 div 的样式属性中。您可以忽略随机数。我把它用作占位符。

 <div id="outterDiv" class="outterDivision"> </div>​


var html = '';

        var i;
        for(i=0;i<=4;i++) {
           var Random_Number = Math.ceil(Math.random()*500+i);
            html +='<div id="inner'+i+'" class="anything" style="top:50px; left:100px;">'+Random_Number+'</div>';         
        }
        $('#outterDiv').html(html);
于 2012-06-01T07:08:04.413 回答