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

Question

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

<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
    });
});

Fiddle

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

---

如果您需要堆栈效果而不在lis 上设置height，也可以根据要求使用absolutely 相对于relatively 定位的祖先的定位：

.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
    });
});

Fiddle