1

これについてどうすればよいか正確にはわかりません。私は、いくつかの異なる特性を使用する機能を開発中であり、この段階ではまだ始まったばかりです。

私の目標は、タブのように、4 つの異なるボックスを互いに積み重ねることです。ボックスの1つを選択して手前に来るようにしていますが、残りの3つのボックスのクラスをそれに応じて変更して、きれいに積み重ねられるようにしたいと考えています。

JavaScript :

<script>
    $(document).ready(function () {
        $('#sites div').click(function () {
            $('.topZ-index').removeClass('topZ-index');
            $(this).addClass('topZ-index');
        });
    });
</script>

HTML :

<div id="sites">
    <div id="layer1" class="layer1"></div>
    <div id="layer2" class="layer2"></div>
    <div id="layer3" class="layer3"></div>
    <div id="layer4" class="layer4"></div>
</div>

これは私がこれまでに持っていたもので、各 div には、重複するものから中央に配置された margin-top と margin-left があります。

2 つのアイテムを切り替える例はたくさんありますが、これには 4 つの異なるレイヤーが含まれます。

最終的にはイージング ファイルとタイマー ファイル、およびその他のファイルを使用して、選択したボックスをスムーズに前面にスライドさせ、選択されていない項目にわずかなフェードを追加したいと考えています。ただし、この初期段階でどの程度の影響があるかはわかりません。

この時点で、ボックスを正しく積み重ねる必要があります。

デッキからカードを引いて上に置くのと同じような効果を視覚的に得ることを目指しています。IDも変更する必要があるようですが、jqueryでそれがどのように可能かはわかりません。

いずれにしても firebug を使用すると、これはボックスを選択した後に html がどのように見える必要があるかの例です。

<div id="sites">
    <div id="layer1" class="layer1"></div>
    <div id="layer4" class="layer2 topZ-index"></div>
    <div id="layer2" class="layer3"></div>
    <div id="layer3" class="layer4"></div>
</div>
4

2 に答える 2

0

これは、スタック順序を実装するクラスzindex1からzindex4があることを前提としています。

$(document).ready(function() {
    $('#sites div').click(function() {
        $('#sites div').removeClass('zindex1 zindex2 zindex3 zindex4');
        $(this).addClass('zindex1');
        var index = 2;
        var top = $(this).attr('id');
        $('#sites div').each(function() {
            if ($(this).attr('id') != top) {
                $(this).addClass("zindex" + index);
                index++;
            }
        });
    });
});​

私のフィドルを参照してください

于 2012-12-20T09:02:38.420 に答える
0

これを行うには、z-index を操作します。例えば：

 $('#sites div').click(function () {

     var max_zindex = 0;

     $('.layer').each(function() {
            var zindex =  parseInt($(this).css("z-index"), 10);
         if(zindex > max_zindex) 
            max_zindex = zindex;                     
     });
     max_zindex++; 
    $(this).css('z-index', max_zindex);
  });

ここで動作デモを確認してください: http://jsfiddle.net/viralpatel/h3WaL/2/ </p>

于 2012-12-20T09:06:41.517 に答える