5

このようにdivでラップされたページに複数の列があります：

<div class="first column" style="width:33%; float: left;"></div>
<div class="column" style="width:33%; float: left;"></div>
<div class="last column" style="width:33%; float: left;"></div>

私は基本的に、テキストを列に並べて左から右に配置するプラグインを使用しています。私のcssでは、それらが互いに重なり合うように再配置してから、jqueryを使用して各列を邪魔にならないように移動します。問題は、それらが間違った順序でスタックしていることです。最後の列は最初で、最初の列は下部にあります。

これがCSSです

#reader .column {
    position:absolute;
    top:0;
    left:0;
    background:#fff;
}

スタック順序を変更するにはどうすればよいですか？jQueryを使用して各divにz-indexを追加するための最良の解決策はありますか？私はそれを完全に行う方法ではありません、JSは私の強みではありません。それも私にはちょっともろいようです。スタックの順序を単純に逆にする方法はありますか？これが私の非常に単純なjQueryです：

$(function(){
    $('#reader-inner').columnize();
    $('.column').click(function() {
      $(this).clearQueue().animate({left:'-550'},500, 'swing');
    });
});
4

3 に答える 3

1

これが私が最終的に得たものです：

$('.column').each(function(i, c) {
        $(c).css('z-index', num - i);
    });

ここで、numは実際にはページ上の列の数に加えて、他の要素の最大のz-indexに基づく任意の量です。

于 2012-06-03T19:54:12.753 に答える
0
  1. 要素の長さ/数を取得します
  2. その数から差し引く。
  3. 1または0のz-indexにヒットしないように、10などの数値を掛けます。

。

var rows = $(".somecontainer").children('div').get();
$.each(rows, function(index, ele) {
    $(ele).css({"z-index": (rows.length - i) * 10 });
});
于 2015-09-15T18:47:27.360 に答える
-1

.columndivでz-indexを使用します

これを確認してください、http：//jsfiddle.net/9EKK2/

作業コードでそのcssを使用するだけです...

于 2012-06-03T14:42:15.017 に答える