1

我不确定该怎么做。我正在开发一个功能，它将使用几个不同的特性，并且在这个阶段才刚刚开始。

我的目标是让 4 个不同的盒子相互堆叠，有点像一个标签。我有它，这样我就可以选择其中一个盒子，它会出现在前面，但我希望能够相应地更改剩余 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 从它重叠的那个居中。

我看到很多在两个项目之间切换的例子，但这涉及到 4 个不同的层

我知道我最终会希望使用缓动和计时器文件以及其他一些文件将选定的框平滑地滑动到前面，并为未选定的项目添加轻微的淡入淡出。我不确定在这个开始阶段有多少轴承。

在这一点上，我只需要正确堆叠盒子。

我的目标是在视觉上获得类似于从牌组中拉出一张牌并将其放在顶部的效果。看来，我可能还需要更改 id，但我不确定在 jquery 中这有多大可能。

在任何使用萤火虫的情况下，这是我选择一个框后 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 回答