Javascript 颜色从一系列颜色中列出项目

我有两种颜色

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)

这个例子是非常简单的，我需要做它在离开，使代码将与任何颜色范围的工作

---

我该怎么做呢请给我指出正确的方向我不确定，但也许是这个？

---

ul li ul{-webkit线性梯度：（rgb（255,0255），rgb（255,0,0））}

我不确定，但可能是这个？

ul li ul{-webkit线性梯度：（rgb（255,0255），rgb（255,0,0））}

使用：

$（文档）.ready（函数（）{
$（'ul'）。每个（函数（）{
var lis=$（this）.children（'li'），
l=lis.length，
颜色_from=[255,0255]，
颜色_to=[255,0,0]；
lis.每个功能（一）{
var c=[]，j=0；
对于（；j<3；++j）
c[j]=数学地板（颜色从[j]*（l-i）/l+颜色从[j]*（i）/l到[j]*（i）/l）；
$（this.css（“背景色”，“rgb（'+c.join（'，'）+'））”）；
} );
});
});

使用：

$（文档）.ready（函数（）{
$（'ul'）。每个（函数（）{
var lis=$（this）.children（'li'），
l=lis.length，
颜色_from=[255,0255]，
颜色_to=[255,0,0]；
lis.每个功能（一）{
var c=[]，j=0；
对于（；j<3；++j）
c[j]=数学地板（颜色从[j]*（l-i）/l+颜色从[j]*（i）/l到[j]*（i）/l）；
$（this.css（“背景色”，“rgb（'+c.join（'，'）+'））”）；
} );
});
});

---

为了简单起见，我建议：

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'));

---

为了简单起见，我建议：

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'));

.

试试这个：

HTML:

试试这个：

HTML:

---

非常感谢，如果rgb中的所有3个值都发生了变化，我会继续吗？只需将

color\u从

和

color\u更改为

值即可。即

color\u from=[255,255,255]，color\u to=[0,0,0]

（或任何您想要更改的颜色值）。非常感谢，如果rgb中的所有3个值都更改，我会继续吗？只需将

color\u从

和

color\u更改为

值即可。即

color\u from=[255,255,255]，color\u to=[0,0,0]（或任何要在其间更改的颜色值）。
<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>

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