javascript - 颜色范围内的颜色列表项

Question

我有两种颜色 rgb(255, 0, 255) 和 rgb(255, 0, 0)。

我还有一个包含 x 个 og 列表项的无序列表。

我需要给所有列表项一个在该颜色范围内平均分割的背景。

例如

first li: rgb(255, 0 ,255)
second li: rgb(255, 0 ,127)
third li: rgb(255, 0 ,63)
fourth li: rgb(255, 0 ,0)

这个例子非常简单，我需要直接完成它，这样代码就可以处理任何颜色范围。

我该怎么做，请指出正确的方向

Answer 1

使用 jQuery :

$(document).ready( function(){
    $( 'ul' ).each( function(){
        var lis = $( this ).children( 'li' ),
            l          = lis.length,
            color_from = [ 255, 0, 255 ],
            color_to   = [ 255, 0, 0 ];
        lis.each( function(i){
            var c = [],j=0;
            for ( ; j < 3; ++j )
                c[j] = Math.floor( color_from[j]*(l-i)/l + color_to[j]*(i)/l );
            $( this ).css( "background-color", 'rgb(' + c.join(',') + ')' );
        } );
    });
});

JSFIDDLE