1

2 つのラッパー div が並んでいます。左の列の選択した div の位置と一致するように、右の列に div を並べたい。

フィドルでは、右側の列の各 div を、左側の列の 2 つおきの div の上部に揃える必要があります。左側の 2 つの div ごとに 1 つの div [x] が必要です。

それはすべて動的に作成されるため、フィドルをhttp://jsfiddle.net/sKZXJ/のように作成しました

HTML:

<!-- Extra height added because that seems part of the problem -->
<div style="height:60px;"></div>

<div id="scroller">
    <div id="wrapper1"></div>
    <div id="wrapper2"></div>
</div>

CSS:

#scroller {
    height:300px;
    width:60px;
    overflow-x:scroll;
}
#wrapper1 {float:left; width:15px;}
#wrapper2 {float:left; width:15px;}
.littleOne {
    margin-top:1px;
    position:relative;
    height:40px;
    background-color:#006600;
}
.littleTwo {
    margin-top:1px;
    position:relative;
    background-color:#00CCCC;
}

楽しい部分:

$(document).ready(function() {

    // Fill wrapper1 with divs
    for(var i=0;i<50;i++) {
        $('#wrapper1').append('<div id="a'+i+'" class="littleOne"></div>');
    }

    // Add selected divs to wrapper2 in matching positions
    var pos = 0;
    for(var i=0;i<50;i+=2) {
        $('#wrapper2').append('<div id="b'+i+'" class="littleTwo">X</div>');
        pos = $('#a'+i).position().top - $('#scroller').position().top;
        $('#b'+i).css('top', pos+'px');
    }

});
4

4 に答える 4

2

どうぞ: http://jsfiddle.net/f5ArU/3/

$(document).ready(function() {

    // Fill wrapper1 with divs
    for(var i=0;i<50;i++) {
        $('#wrapper1').append('<div id="a'+i+'" class="littleOne"></div>');
    }

    // Add selected divs to wrapper2 in matching positions
    var pos = 0;
    var offset = 0;
    for(var i=0;i<50;i+=2) {
        var b = $('<div id="b'+i+'" class="littleTwo">X</div>');
        $('#wrapper2').append(b);
        pos = $('#a'+i).position().top - offset;
        offset += b.height() + 1;
        b.css('top', pos+'px');
    }

});
于 2012-04-27T05:28:28.607 に答える
0

「左の列の選択したdivの位置に一致するように、右の列にdivを並べたい。」

このコード例で管理できます-リンクを更新しました http://jsfiddle.net/sKZXJ/2/- 背景色の変更

$("#wrapper1 div").click(function () {
$('#wrapper2 div:eq('+($(this).index())+')').css('background-color','#000');
于 2012-04-27T05:31:10.087 に答える
0

それはあなたが望むものですか？

http://jsfiddle.net/sKZXJ/1/

scrollTop代わりに1か所で使用されtopます（それが意味する場合）。

于 2012-04-27T05:12:35.193 に答える
0

これは、html 構造と css を利用するソリューションです: http://jsfiddle.net/sKZXJ/6/

これは、ロジックをレイアウトから分離しようとする代替手段です。小さな「x」が 1 つおきの緑色のブロックにしか表示されないという事実から、3 つのブロックはそれぞれ論理的にグループ化する必要があると思われます。

html:

<div id="scroller"></div>

js:

$(document).ready(function() {
    // Fill wrapper1 with divs
    for(var i=0;i<50;i+=2) {
        var one = $('<div></div>').attr('id', 'a'+i).addClass('littleOne'),
            two = $('<div></div>').attr('id', 'b'+i+1).addClass('littleTwo'),
            three = $('<div></div>').attr('id', 'a'+i+1).addClass('littleOne'),
            container = $('<div></div>').addClass('container').append(one).append(two).append(three);

        $('#scroller').append(container);
    }    
});​

CSS:

#scroller {
    height:300px;
    width:60px;
    overflow-x:scroll;
}
.container {
    width: 40px;
}
div {
    margin: 1px;
    width: 15px;
}
.littleOne {
    float: left;
    clear: left;
    height:40px;
    background-color:#006600;
}
.littleTwo {
    float: left;
    height:20px;
    background-color:#00CCCC;
}    ​
于 2012-04-27T05:50:10.693 に答える