1

多くのdivを円の形で配置したいと思います。divには相対ポジショニングを使用します。まず、円の周りに4つのdivを配置しようとしています

div 1-トップ50、左100

div 2-トップ100、左150

div3-上150、左100

div 4-トップ100、左50

実際の場合の値を計算して設定しますが、今のところ問題ではありません。外側のdiv内に4つのdiv（実際の場合は多数）を作成することは可能ですか。ただし、これらのdivに異なるシーケンシャルIDを割り当て、指定された位置に配置する必要があります。

スクリプトを使用して、計算してから上と左の位置を割り当てる必要があります。では、スクリプトを使用してこれらの値を割り当てる方法を示してください。

4

3 に答える 3

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 に答える
1

数学のバックグラウンドも必要なので、これは本当にいい質問です。

したがって、最初に、何をしようとしているのかを考えてみましょう。0.円の中心とその半径を決定する必要があります1.円のどの角度で、divを配置するかを決定する必要があります2次に、角度が与えられると、divの位置を与える関数

それで、私たちはそれで何をしますか？

  1. どちらを円の中心にするかを決定します（ページの中心にとどまる必要がある場合）

  2. 半径を決定します（ウィンドウの寸法に応じて計算することもできます）

  3. 三角法：角度の反復を理解するには、360°をdivの数で割るだけです。divが2つある場合、角度の間隔は360/2 = 180（醜い）です。10 divがある場合、intrvalは36°です

非常に良いです。これでコーディングの準備が整いました。

  1. センターを取得：このstackoverflowリンクでtにリダイレクトします

  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 に答える