0

ウィンドウに応じてボックスの幅と高さを計算し、heightそれwidthを12で割って、本体に12個の同じサイズのボックスを取得します。

このスクリプトを作成して、クリック時に本文にボックスを追加しました-

$('body').append('<div class="box"></div>');
        $('.box').css('display','block');

これは、このボックスの幅をどのように計算したかです-

var width=$(window).width();
var span12= width/12;

そして高さについて-

 var height=$(window).height();
    var spanheight=height/12;

クリックイベントで可能なすべてのボックスを追加したい。それは可能ですか？

フィドル

4

5 に答える 5

1

次のように試すことができます。

http://jsfiddle.net/Em23e/12/

ループを使用して 12 個のボックスを表示するか、Number で再度乗算すると、画面に可能なすべてのボックスが表示されます。

計算の主な問題は、各ボックスの周囲の 3px を考慮していないことです。

margin: 3px;
于 2013-07-05T05:33:41.433 に答える
1

これは、投稿した JavaScript を置き換える実際の JavaScript コードです。このコードは、本体の高さと幅をループし、表示領域全体に div タイルを作成します。

これがフィドルです：http://jsfiddle.net/yUqXs/5/

$(function(){
var winwidth = $(window).width();
var width=winwidth;
var span12= width/12;
var winheight = $(window).height();
var height=winheight;
var spanheight=height/12;

$('.button').click(function(){
    var $body = $('body');
    var totalw = 0;
    var totalh = 0;
    var totalw2 = span12;
    var totalh2 = spanheight;

    while (totalh2 < winheight)
    {
        totalw = 0;
        totalw2 = span12;
        while (totalw2 < winwidth)
        {
            $body.append('<div class="box" style="display: block; background: green; width: '+span12+'px; height: '+spanheight+'px; float: left; position: absolute; top: '+totalh+'px; left: '+totalw+'px;">&nbsp;</div>');
            totalw += span12;
            totalw2 += span12;
        }
        totalh += spanheight;
        totalh2 += spanheight;
    }
});
});
于 2013-07-05T05:33:46.100 に答える
0

これを使ってみてください

$(function(){

var width=$(window).width();
var span12= width/12;
var height=$(window).height();
var spanheight=height/12;

$('.button').click(function(){
$('body').append('<div class="box"></div>');
    $('.box').css('display','block');
    $('.box').css("height",spanheight);
    $('.box').css("width",span12);
    $('.box').css("background","green");
    $('.box').css("margin","10px");
});
});

あなたのケースでは、divがボディに追加されていますが、高さと幅が「0」であるため、クリック機能で設定する必要があります。

于 2013-07-05T05:38:01.703 に答える
0

確かではありませんが、おそらくこれが必要で、コードを更新しました。

css propertiesボックスを追加するたびに を更新する必要があります。このフィドルをチェックしてください

于 2013-07-05T05:34:31.197 に答える