[英]color list-items from a range of colors
我有两种颜色rgb(255, 0, 255)
和rgb(255, 0, 0)
。
我还有一个带有x number og list-items的无序列表。
我需要在所有颜色范围之间为所有列表项目提供背景分割。
例如
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(',') + ')' );
} );
});
});
我不确定,但也许这个? 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小提琴演示 。
尝试这个东西 :
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();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.