堆叠的图像集，每个图像的偏移量增加

Question

我有一个图像列表，我想堆叠在一起，一个叠在一起，然后将每个图像上下偏移 30px。

<ul>
   <li><img src="#"></li>
   <li><img src="#"></li>
   <li><img src="#"></li>
   <li><img src="#"></li>
   <li><img src="#"></li>
</ul>

我发现了一个类似效果的 jsFiddle （http://jsfiddle.net/BrAbs/1/），但也需要每个图像的左侧位置偏移和增加（0px、30px、60px、90px）等。

Answer 1

使用 jQuery：

$('li').each(function (i) {
    $(this).css({
        left: 30 * i
    });
});

小提琴

需要position:relative要将 left CSS 属性设置为的元素。

---

根据要求，如果需要堆栈效果而不在li上设置height，您还可以相对于 relative ly 定位的祖先使用 absolute ly 定位：

.ulClass {
    position: relative; /*resets the absolute positioning of descendant li(s)*/
}
.ulClass li {
    position: absolute; /*absolute positioning relatively to ancestor .ulClass*/
}

然后更新的 JS 添加一个top偏移量：

$('li').each(function (i) {
    $(this).css({
        top: 30 * i,
        left: 30 * i
    });
});

小提琴