0

問題なく動作する関数を作成しましたが、それを拡張して複数のレイヤーを追加すると、数学がすべてオフになっていることがわかります。私は基本的に、幅、左、上の値を変更して絶対divのサイズを変更しようとしています(この質問では、数学を理解し$(window).width()、左の値を調整し、さらに詳しく知りたい場合は幅を調整することに重点を置いています)深さ）。これは、私が話していることをもう少しうまくデモするためのフィドルです。

繰り返しますが、この機能は適切な数学に基づいた主要なものです。そのため、数学がオフになっていることがわかっているため、失敗しています。作業している要素を取得して、ウィンドウ幅を活用して拡大縮小する方法がわかりません。

このフィドルですべてを説明する必要がありますが、簡単な詳細を説明しましょう。

詳細: ユーザーは jQuery を使用して好きなだけレイヤーを追加できます。.draggable()レイヤーは目的の位置にドラッグされ、DB に保存され、その位置とコンテンツがフロント エンドで使用されます。

私がやろうとしているのは、これをレスポンシブにすることです。位置がランダム/動的であるため、cssはうまく機能しません。

HTML の例:

  <div class="jsfiddle-container">
    <div class="example">

      // You can see the positions are in no particular order
      <div class="d1" data-orig="191px" style="position: absolute; left: 191px;"><span></span>Stewie Griffen</div>
      <div class="d2" data-orig="10px" style="position: absolute; left: 10px;"><span></span>Brian Griffen</div>
      <div class="d3" data-orig="419px" style="position: absolute; left: 419px;"><span></span>Peter Griffen</div>

    </div>
  </div>

jQuery スニペット: このフィドルの詳細

  obj.each(function () {
        var leftData = $(this).data('orig');
        var left = parseInt(leftData);
        $(this).css({

              'left': w_d - left,
              'width': w_d,

  });

締めくくり:私が感じるフレームワークはほとんどすべて設定されています。それは、数学を理解し$(window).width()、画面がスクロールしているときに左の値と結び付け、幅を適切に設定することです。

いくつかのヘルプは素晴らしいものであり、頭痛の種を大幅に軽減してくれます。また、皆さんの意見を聞くのも楽しみです。また、詳細が必要な場合はお尋ねください。フィドルに合わせてコードを書き直しましたが、完璧ではありませんが、私が話していることをお見せしたいと思います。

4

1 に答える 1

1

あなたがしようとしているのは、コンテナの幅が 800px 未満の場合、上部を完全に埋めるためにすべての div の幅と左を変更する場合、幅を 100% に基づいてパーセントを使用し、要素の数を使用しない理由です。スプリッターとして。

たとえば、幅が 600px で 3 つの div がある場合、600px は 100% になり、3 つの要素があるため、それぞれ 33% = 600/3 = それぞれ 200px になります。次に、0 から始めて、この量だけ増加するように左を設定します。

var itemWidth = 0;
var numOfItems = $(obj).length;
var containerWidth = $(".jsfiddle-container").css.width;

if (containerWidth <= 800)
{
    itemWidth = containerWidth / numOfItems;
    var count = 0;

    obj.each(function () {
        $(this).css({
          'left': (itemWidth * count) + 'px',
          'width': itemWidth + 'px',

        });
        count++;
    });
}
else
{
    // Set static width
}
于 2013-08-21T09:01:37.820 に答える