我有两种颜色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)
这个例子非常简单,我需要马上做,这样代码就可以处理任何颜色范围。
我该怎么做?请告诉我正确的方向
使用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
我不确定,但也许是这样?ul li ul{-webkit-linear-gradient:(rgb(255,0,255),rgb(255,0,0))}
为了简单起见,我建议:
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演示。
试试这个东西:
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();
});
演示