2

ページの読み込み時に読み込まれるアニメーションを作成しようとしていました。

最初は白い背景のオブジェクトを作成します。

1 秒ごとにオブジェクトを 10px ずつ右にシフトし、その間に RGB 値に 10 を加えてオブジェクトの色を変更します。

この jsFiddle を作成しましたが、機能しません (境界線はオブジェクトを区別するためのものです) 入力は大歓迎です。

    function RGB2HTML(red, green, blue)
    {
            var decColor =0x1000000* blue + 0x100 * green + 0x10000 *red ;
            return '#'+decColor.toString(16).substr(1);
    }


    window.onload = function(){   
           var currentColor='white';
           var red = 0;
           var green = 0;
           var blue =0;
           setInterval(function(){
               $('.object').style.top += 10px;
               $('.object').style.left += 10px;
               $('.object').style.background-color = RGB2HTML(red+10; green+10; blue+10)
           }, 1000);
    };

ここにjsfiddleがあります：

http://jsfiddle.net/jykG8/70/

4

3 に答える 3

2

どうぞ: http://jsfiddle.net/jykG8/77/

top初期値と値の変数を設定して、leftそれらを jQuery に渡し.css()、そこからインクリメントすることができます。同じ原則が色変換にも適用されます。

window.onload = function(){   
    var currentColor='white';
    var red = 0;
    var green = 0;
    var blue = 0;
    var top = 0;
    var left = 0;
    setInterval(function(){
        $('.object').css('top', top += 10);
        $('.object').css('left', left += 10);
        $('.object').css('background-color', 'rgb('+(red+=10)+','+(green+=10)+','+(blue+=10)+')');
        }, 1000);
};

さらに、1 つのセレクターを扱っているため、CSS プロパティを 1 つの呼び出しに結合できます。

$('.object').css({
    'top' : top += 10,
    'left' : left += 10,
    'background-color' : 'rgb('+(red+=10)+','+(green+=10)+','+(blue+=10)+')'
});

例: http://jsfiddle.net/jykG8/80/

于 2013-11-01T17:51:26.840 に答える