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

フィドル

CSSプロパティをposition:relative設定している要素に必要です。left

---

要求に応じて、sを設定せずに煙突効果が必要な場合は、lyに配置された祖先absoluteに対してlyの配置を使用することもできます。relativeheightli

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

フィドル