更改飞行中各个元素的背景颜色

Question

在CSS或JQuery中，我可以动态更改li标记的背景，以便每个元素的亮度稍微变轻一些，直至变为白色为止？

例如说我有一个10 li元素的列表。第一个会有一个红色（＃ff0000）背景，接下来会是一个较浅的红色，等等等等，直到我们到达最后一个会有白色背景（#FFFFFF）的最后一个。

该列表可以是任意长度，我只希望背景颜色从一种颜色变成例如红到另一种颜色，例如白色。我的网站使用jQuery，所以如果我必须使用它，我不介意。

感谢

Answer 1

这是比较容易的，假设你可以建立一个抓住你<li>元素列表选择。

像这样的东西（代码是未经测试）：

// 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

简单的插件，它允许你修改的开始和结束的RGB值：

<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

虽然有点比其他的答案更复杂，这会给你一个很好的从一种颜色到另一种颜色的线性渐变，并允许你使用它们的十六进制表示。

标记

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

代码

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

当然，这可以在一个jQuery插件，如果你喜欢被包裹起来。

希望它能帮助！