[英]color list-items from a range of colors
I have a two colors rgb(255, 0, 255)
and rgb(255, 0, 0)
. 我有两种颜色
rgb(255, 0, 255)
和rgb(255, 0, 0)
。
I also have an unordered list with x number og list-items. 我还有一个带有x number og list-items的无序列表。
I need to give all the list-items a background split equaly between that range of colors. 我需要在所有颜色范围之间为所有列表项目提供背景分割。
For instance 例如
first li: rgb(255, 0 ,255)
second li: rgb(255, 0 ,127)
third li: rgb(255, 0 ,63)
fourth li: rgb(255, 0 ,0)
This example is very simplified and I need to do it in away so the code will work with any color range. 这个例子非常简单,我需要在远处进行,因此代码可以适用于任何颜色范围。
How would I go about this please point me in the right direction 我怎么会这样做,请指出我正确的方向
$(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(',') + ')' );
} );
});
});
Im not sure, but maybe this? 我不确定,但也许这个?
ul li ul{-webkit-linear-gradient:(rgb(255,0,255),rgb(255,0,0))}
I'd suggest, for simplicity: 为简单起见,我建议:
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:
<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 JavaScript的
$(document).ready(function(){
i2.emph();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.