Question

我在这个网站上很新，发现它非常有趣...... 实际上，我想要以相同的矩阵形式拆分div，我已经采用了它。点击它里面的任何地方...... 对于。例- 1）首次点击我的div将分成2 X 2部分.. 2）第二次点击我的div将分成3 X 3部分.. 等等n X n ..

我已经在google上搜索了它，但不幸的是我没有找到任何脚本作为它的解决方案..非常感谢提前回复..

<div  class="main_div" style="width:500px;height:500px;background-color:#9F0;">

 </div>

Answer 1

尝试。
如果您需要为某些图形目的执行此操作，请使用SVG或canvas

随机颜色礼貌：http://www.paulirish.com/2009/random-hex-color-code-snippets/

＆＃13;

var no = 1, $m = $(".main_div"), size = 180;

$m.click(function(){
    no++;
    var i, _no = no * no, _size = size/no;
    $m.empty();

    for(i=0; i<_no; i++)
        $m.append(
            $('<div title='+ i +'/>')
            .css('background-color', '#'+Math.floor(Math.random()*16777215).toString(16))
        );

    $m.find('> div').css({ width:_size, height:_size });

});

＆＃13;

.main_div {
    width:180px;
    height:180px;
    background-color:#9F0;
}
.main_div > div {
    float: left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="main_div"></div>

＆＃13;

点击时，我的方形div以相等的矩阵矩阵形式连续分割

1 个答案: