Ich habe zwei Farben rgb(255, 0, 255) und rgb(255, 0, 0).

Ich habe auch eine ungeordnete Liste mit x Anzahl von Listenelementen.

Ich muss allen Listenelementen einen Hintergrund geben, der gleichmäßig auf diesen Farbbereich verteilt ist.

Zum Beispiel

first li: rgb(255, 0 ,255)
second li: rgb(255, 0 ,127)
third li: rgb(255, 0 ,63)
fourth li: rgb(255, 0 ,0)

Dieses Beispiel ist sehr vereinfacht und ich muss es weg machen, damit der Code mit jedem Farbbereich funktioniert.

Wie würde ich vorgehen, bitte weisen Sie mich in die richtige Richtung

1
Rasmus Nørskov 1 Dez. 2013 im 03:01

4 Antworten

Beste Antwort

Verwenden von 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

2
MT0 30 Nov. 2013 im 23:17

Probieren Sie dieses Zeug aus:

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();
});

DEMO

0
Berezh 14 Dez. 2013 im 23:15

Der Einfachheit halber würde ich vorschlagen:

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-Demo.

1
David says reinstate Monica 1 Dez. 2013 im 00:30

Ich bin mir nicht sicher, aber vielleicht das? ul li ul{-webkit-linear-gradient:(rgb(255,0,255),rgb(255,0,0))}

1
user2971509 30 Nov. 2013 im 23:05