Zmiana koloru tła poszczególnych elementów w locie

Question

Czy istnieje sposób w CSS lub JQuery, w którym mogę dynamicznie zmieniać tło znaczników li, aby były one nieco jaśniejsze dla każdego elementu, dopóki nie uzyska białego koloru?

Na przykład, mam listę 10 li elementów. Pierwszy miałby kolor czerwony (# ff0000), następny byłby jaśniejszym odcieniem czerwieni i tak dalej, aż dotarliśmy do ostatniego, który miałby tło białe (#FFFFFF).

Lista może mieć dowolną długość i chcę tylko, aby kolor tła zmienił się z jednego koloru, np. czerwony na inny kolor, np. biały. Moja witryna korzysta z jQuery, więc jeśli muszę to wykorzystać, nie mam nic przeciwko.

Dzięki

Answer 1

Jest to stosunkowo łatwe, zakładając, że można zbudować selektor, który chwyta swoją listę <li> elementów.

Coś jak ten (kod jest niesprawdzone):

// get all <li>'s within <ul id="my-list"> 
var items = $('#my-list li'); 

// the increment between each color change 
var step = (255.0/items.size()); 

items.each(function(i, e) { 
    var shade = i * step; 
    $(this).css("background-color", "rgb(255," + shade + "," + shade + ")"); 
}); 

Answer 2

Prosty plugin, który pozwala modyfikować rozpoczęcia i zakończenia rgb wartości:

<script type="text/javascript"> 

    (function ($) { 
     $.fn.transitionColor = function (options) { 

      var defaults = { 
       redStart: 255, 
       greenStart: 0, 
       blueStart: 0, 
       redEnd: 255, 
       greenEnd: 255, 
       blueEnd: 255 
      }; 
      options = $.extend(defaults, options); 

      return this.each(function() { 

       var children = $(this).children(); 
       var size = children.size(); 

       var redStep = (options.redEnd - options.redStart)/(size - 1); 
       var greenStep = (options.greenEnd - options.greenStart)/(size - 1); 
       var blueStep = (options.blueEnd - options.blueStart)/(size - 1); 

       children.each(function (i, item) { 
        var red = Math.ceil(options.redStart + (redStep * i)); 
        var green = Math.ceil(options.greenStart + (greenStep * i)); 
        var blue = Math.ceil(options.blueStart + (blueStep * i)); 

        $(item).css('background-color', 'rgb(' + red + ',' + green + ',' + blue + ')'); 
       }); 

      }); 
     }; 
    })(jQuery); 

    $(document).ready(function() { 
     $("#list").transitionColor(); 
    }); 

</script> 

<ul id="list"> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
</ul> 

Answer 3

choć nieco bardziej skomplikowana niż innych odpowiedzi , da ci to ładny liniowy gradient od jednego koloru do drugiego i pozwoli ci użyć ich reprezentacji w systemie szesnastkowym.

markup

<ul id="my-list"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
    <li>Item 6</li> 
</ul> 

kod

$(document).ready(function() { 
    makeLovely($("#my-list li"), 0x00ff00, 0x0000ff); 
}); 

// code modified from: http://www.herethere.net/~samson/php/color_gradient/color_gradient_generator.php.txt 
function makeLovely(items, startColor, endColor) { 
    var r0 = (startColor & 0xff0000) >> 16; 
    var g0 = (startColor & 0x00ff00) >> 8; 
    var b0 = (startColor & 0x0000ff); 
    var r1 = (endColor & 0xff0000) >> 16; 
    var g1 = (endColor & 0x00ff00) >> 8; 
    var b1 = (endColor & 0x0000ff); 
    var steps = items.length; 

    items.each(function(index) { 
     var r = interpolate(r0, r1, index, steps); 
     var g = interpolate(g0, g1, index, steps); 
     var b = interpolate(b0, b1, index, steps); 
     var newColor = zeroFill(((((r << 8) | g) << 8) | b).toString(16), 6); 

     // console.log(newColor); 

     $(this).css('background-color', newColor); 
    }); 
} 

function interpolate(start, end, index, steps) { 
    if(start < end) { 
     return ((end - start) * (index/steps)) + start; 
    } 
    return ((start - end) * (1 - (index/steps))) + end; 
} 

// stolen outright from: http://stackoverflow.com/questions/1267283/how-can-i-create-a-zerofilled-value-using-javascript 
function zeroFill(number, width) { 
    width -= number.toString().length; 
    if (width > 0) { 
     return new Array(width + (/\./.test(number) ? 2 : 1)).join('0') + number; 
    } 
    return number; 
} 

Oczywiście może to być opakowane w plugin jQuery, jeśli wolisz.

Mam nadzieję, że pomoże!