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

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您将leftCSS 属性设置为的元素。

---

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

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

小提琴