2

我试图创建一个动画，它在页面加载时加载。

最初它创建具有白色背景的对象。

每隔 1 秒，它将对象向右移动 10px，平均同时通过将 10 添加到其 RGB 值来更改对象颜色。

我已经创建了这个 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);
};

此外，由于我们正在处理一个选择器，我们可以将 CSS 属性组合到一个调用中：

$('.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 回答
0

尝试这个：

window.onload = function(){   
    var red = 0;
    var green = 0;
    var blue =0;
    setInterval(function(){
        var t = parseInt($('.object').css('top')) + 10;
        var l = parseInt($('.object').css('left')) + 10;
        red += 10;
        green += 10;
        blue += 10;
        $('.object').css({top: t}).css({left: l}).css({'background-color': '#' + red.toString(16) + green.toString(16) + blue.toString(16)});
    }, 1000);
};

http://jsfiddle.net/jykG8/79/

于 2013-11-01T18:03:24.420 回答
0

http://jsfiddle.net/vdU9X/

function RGB2HTML(red, green, blue)
{
    var decColor = blue + 256 * green + 65536 * red;
    return '#' + decColor.toString(16);
}


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

我不是 100% 确定 RGB2HTML 功能。我可能把蓝色和红色颠倒了。但是，如果你想从白色变为黑色，你需要从 256 开始向下。应该添加一些逻辑来解释否定无效。

于 2013-11-01T17:54:41.033 回答