颜色范围内的颜色列表项答案

【问题标题】：color list-items from a range of colors颜色范围内的颜色列表项
【发布时间】：2013-11-30 23:01:41
【问题描述】：

我有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)

这个例子非常简单，我需要先完成它，这样代码才能在任何颜色范围内工作。

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

【问题讨论】：

标签： javascript html css

【解决方案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

【讨论】：

非常感谢，如果 rgb 中的所有 3 个值都发生变化，我会继续这样做吗？
只需更改 color_from 和 color_to 值。 IE。 color_from = [ 255, 255, 255 ], color_to = [ 0, 0, 0 ];（或您想要更改的任何颜色值）。

【解决方案2】：

我不确定，但也许是这个？ ul li ul{-webkit-linear-gradient:(rgb(255,0,255),rgb(255,0,0))}

【讨论】：

【解决方案3】：

为了简单起见，我建议：

function colorRange(elems){
    var from = from || 255,
        to = to || 0,
        steps = Math.floor(from/elems.length);
    elems.css('background-color', function(i){
        return 'rgb(255, 0,' + (from - (i*steps)) + ')';
    });
}

colorRange($('li'));

JS Fiddle demo.

【讨论】：

【解决方案4】：

试试这个stuff:

HTML：

<ul data-i2="css:[{backgroundColor:'rgb(255, 0, 255)'},{backgroundColor:'rgb(255, 0, 0)'}]">
    <li data-i2="rate:1">first</li>
    <li data-i2="rate:2">second</li>
    <li data-i2="rate:3">third</li>
    <li data-i2="rate:4">fourth</li>
</ul>

JavaScript

$(document).ready(function(){
    i2.emph();
});

DEMO

【讨论】：