jquery - 定位多个重叠的 div

Question

我有 4 个 div 像封面流一样重叠，FIDDLE HERE

我已经设法以正确的方式堆叠它们(一个堆叠另一个)，但我知道我在 z-index 上做错了。 我遇到的3个问题:

1. 我只能定位第一个 div (#product-image)，所有其他 3 个 div 都没有响应点击事件。
2. 试图以平滑的方式切换透视图，但显然我也做错了。
3. 尽管我指定了包装宽度并设置了 margin:0 auto，但整个封面流并未居中。

我尝试遵循这个 SO answer CSS: Overlapping DIVs issue 但我最多只能让它工作 3 个 div，我的情况不行。

结构如下: HTML

<div class="product-download">
    <div id="product-image">
        <img src="http://placehold.it/300x216" />
    </div>
    <div id="in-situ-image">
        <img src="http://placehold.it/300x216" />
    </div>
    <div id="product-flyer">
        <img src="http://placehold.it/300x216" />
    </div>
    <div id="data-sheet">
        <img src="http://placehold.it/300x216" />
    </div>
</div>

CSS

body {
    overflow:hidden;
    width:100%;
    margin:0 auto;
}
.product-download {
    position:relative;
    width:934px;
    height:397px;
}
.product-download > div {
    position:absolute;
    display:inline-block;
}
#product-image {
    z-index:6;
}
#in-situ-image {
    -webkit-transform: perspective(600px) rotateY(-30deg) translateZ(-100px);
    z-index:5;
    left:120px;
}
#product-flyer {
    -webkit-transform: perspective(600px) rotateY(-30deg) translateZ(-100px);
    z-index:4;
    left:265px;
}
#data-sheet {
    -webkit-transform: perspective(600px) rotateY(-30deg) translateZ(-100px);
    z-index:3;
    left:410px;
}

查询

$(".product-download div").click(function () {
    alert(this.id);
    $(this).fadeTo('slow').css('-webkit-transform', 'perspective( 0px ) rotateY( 0deg ) translateZ(0px)');
    $(this).prevAll().fadeTo('slow').css('-webkit-transform', 'perspective( 600px ) rotateY( 30deg ) translateZ(-100px)');
    $(this).nextAll().fadeTo('slow').css('-webkit-transform', 'perspective( 600px ) rotateY( -30deg ) translateZ(-100px)');
});

Answer 1

正如我所说，我一直在弄乱它，看看我能得到什么。我找到了一种使它们可点击的方法!您还需要整理 z-index，但这确实可以正常工作。

在父对象上设置transform 似乎允许再次点击其他对象。老实说，我不是 100% 确定它是如何工作的，但它确实解决了问题。

CSS:

.product-download {
    position:relative;
    width:934px;
    height:397px;
    -webkit-transform: perspective(600px) rotateY(0deg) translateZ(0px);
}

DEMO HERE

注意:如果人们可以检查这个那就太好了。它似乎停止为我工作但随后又开始工作......不确定我是否错过了点击或其他东西。请发表评论，说明这是否为您解决了问题。

---

这只是 z-index 的一个示例，您也需要更改它，否则它们将相互贯穿。

刚刚添加:

.css('z-index','1');

到 prevAll() 和 nextAll() 结束。

然后在 fadeTo() 上设置:

.css('z-index','9999');

这只是一个简单的示例，您可以稍微整理一下。希望这对您有所帮助!

DEMO HERE

---

修复了 z-index 问题。

jQuery:

$(this).nextAll().each(function (index) {
    $(this).fadeTo('slow').css('-webkit-transform', 'perspective( 600px ) rotateY( -30deg ) translateZ(-100px)').css('z-index', '-' + index);
});

DEMO HERE