[英]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.