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

Fiddle

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

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

.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

一组图像堆叠与偏移增加每个

1 个答案: