2

私はこのようなアニメーションを持っています:

@-webkit-keyframes slideImg0
    0%
        background-position: center 0px
    40%
        background-position: center -50px
    55%
        background-position: center 50px
    75%
        background-position: center 500px
    85%
        background-position: center 510px
    100%
        background-position: center 500px

しかし、このアニメーションは 4 つの異なる画像でわずかに異なる必要があります。現時点では、slideImg1 (まったく同じですが、すべてのピクセル値が +500 です)、slideImg2、slideImg2 があります。時間/スペースの無駄であり、保守性があまりありません。

これを変更するために JavaScript から値を渡す方法はありますか? 「すべての値+500pxでslideImgを実行」できるようにするには？それ以外の

$(".heroImgWrapper").css("-webkit-animation", "slideImg" +counter + " 1s linear");
4

2 に答える 2

0

使用できるコードは次のとおりです。セレクターと目的のデルタを渡すだけです。

function setCss(selector, delta) {
    var points = {
        0: 0,
        40: 55,
        55: 50,
        75: 500,
        85: 510,
        100: 500
    };
    if (typeof delta === "undefined") delta = 0;

    var newPoints = {};
    for (key in points) {
        newPoints[key] = points[key] + delta;
    }

    for (key in newPoints) {
        // Write your code here 
    }
}
于 2013-04-30T01:03:59.620 に答える